Handling elements dynamically loaded to a page using jquery

Question

I use the following to check after the page starts to see if all the images in the container are displayed correctly:

 $(window).bind('load', function() {
        $('.imagecontainer').each(function() {
            if ((typeof this.naturalWidth != "undefined" && this.naturalWidth == 0) || this.readyState == 'uninitialized') {
                // Image not available so handle
            }
        });
    });     

This all works if the images are displayed on the page during the first load.

However, I was faced with a situation where images are dynamically loaded due to user action.

Is there a way to change my code to handle this? I know about the .live () jquery function, but don't know how I could represent it here.

Answer 1

- , . bind live .

: http://api.jquery.com/live/

• jQuery 1.3.x JavaScript ( ) .live(): click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover mouseup.
  • jQuery 1.4, .live() , JavaScript. jQuery 1.4.1 ( , , ).
  • jQuery 1.4.1 hover ( mouseenter mouseleave, , , ).

( .live('load') 1.4+).