jquery .load isn't checking if my element is loaded

Question

I have this code

<script type="text/javascript">
$("#main_photo_display").load(function(){
    alert("loaded");
});
</script>

<div id="main_photo_display"></div>

I need it to do something once that div has loaded. Currently it does nothing. When I substitute window for "#main_photo_display" it works. I have googled and I keep coming across .load as how to check if a page element has been loaded.

Answer 1

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

Source: http://api.jquery.com/load-event/

Further down on the same page they state:

It doesn't correctly bubble up the DOM tree

So you can't delegate this event, the event handler must be attached to the element on which the load event fires.

Answer 2

Or you can run the script after the DOM is ready like so:

<script type="text/javascript">
$(document).ready(function() {
    $("#main_photo_display").load(function(){
        alert("loaded");
    });
});
</script>

<div id="main_photo_display"></div>

Sorry I think I read it wrong :) You need this:

<script type="text/javascript">
    $(document).ready(function() {
        alert('loaded');
    });
</script>