Handling elements dynamically loaded onto page with jquery

Question

I am using the following to check after a page fires to see if all images in the container have been rendered 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 a treat if the images are rendered on the page during first load.

However I have ran into a situation where images are dynamically loaded driven by user action.

Is there any way I can alter my code to handle this? I am aware of the .live() jquery function but not sure how I could introduce it here.

Answer 1

The live function is exactly what you want. Really you just need to replace bind with live in your example to handle future cases.

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

• In jQuery 1.3.x only the following JavaScript events (in addition to custom events) could be bound with .live(): click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.
  • As of jQuery 1.4 the .live() method supports custom events as well as all JavaScript events. As of jQuery 1.4.1 even focus and blur work with live (mapping to the more appropriate, bubbling, events focusin and focusout).
  • As of jQuery 1.4.1 the hover event can be specified (mapping to mouseenter and mouseleave, which, in turn, are mapped to mouseover and mouseout).

(you'll need to be using 1.4+ for .live('load') support.)