Live() keyword not working on load with dynamic html images

Question

I have images being dynamically added to a page, I don't seem to be able to get the 'load' event working dynamically with live().

This is the code I currently have:

$('#largeImg' + nextUniqueItemID).hide();
$('#largeImg' + nextUniqueItemID).live('load' , function() {
    $('#loader' + nextUniqueItemID).hide();
    $('#largeImg' + nextUniqueItemID).show();
});

with '#largeImg' + nextUniqueItemID being an image that was added to the page earlier in the function and '#largeImg' + nextUniqueItemID being a loading image.

I feel as if I may be misusing "live" as it doesn't really need a listener but to trigger the event immediately.

Thanks for all your help. I tried "bind" and that never triggered. I also tried doing away with the load, but that didn't work. Is there a way to attach a listener to an event that would indicate when the image was done loading?

Answer 1

What I ended up doing was putting the load event directly in my image's onLoad="" event. That worked out.

Answer 2

I think the jQuery docs may be a little misleading on this one, unless it is doing something really special to get past the problem.

Load events on elements such as images do not bubble up.^{1, 2}

Since they don't bubble up, the document does not know whether a load event had been fired.

Because the document doesn't know about the load event, live will render useless as live relies on events bubbling up to the document, and once they do, it matches the event target with the selectors it already has on file, and if anything matches, the event handler is triggered for that element.

For instance, suppose you were to register the following live event:

$("#container > input").live("change", function() {
    alert("changed");
});

then jQuery will add a change event listener on the document object if it doesn't already exist (similar to):

$(document).bind("change", function() {
    ..
});

When any change event bubbles up to the document, it runs through each registered selector, and checks if any of the resulting nodes for a given selector include the event target (element that the event originated from). If it's present, then the corresponding "live" event handler is fired for that event target.

None of this is possible if the document would not know about the event in the first place.

Unless I am mistaken and jQuery has some secret sauce for doing this, you should directly bind the load event instead of doing it through live.

$("selector").bind("load", function() { .. });

Answer 3

where is this code located??

$('#largeImg' + nextUniqueItemID).hide();
$('#largeImg' + nextUniqueItemID).live('load' , function() {
$('#loader' + nextUniqueItemID).hide();
$('#largeImg' + nextUniqueItemID).show();
});

if that is inside a callback of jQuery ajax, you don't have to use .live(), use .bind().

Answer 4

I would look at the 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 mouseleave").

Whatever is triggering the creation should also trigger the hide and show of the items that you are using with the load event.

Answer 5

Have you tried to use an attribute selector instead of the direct id?

$('#largeImg' + nextUniqueItemID).hide();
$('[id=largeImg' + nextUniqueItemID + ']').live('load', function() {
    $('#loader' + nextUniqueItemID).hide();
    $('[id=largeImg' + nextUniqueItemID + ']').show();
});