How to remove future broken image using jquery

Question

will normally, this will work..

$("img").error(function(){$(this).hide();});

but it doesnt work when putting a live on it

$("img").live("error",function(){$(this).hide();});

the problem is that, for those image which are ajax generated, i cannot hide the broken image.

Answer 1

You could add the event handler as you add the images to the DOM:

$.get(urlHere, function(htmlData) {
    var output = $(htmlData).find('img').error(function () {$(this).hide();}).end();
    $(<selector>).html(output);
});

Here is a demo: http://jsfiddle.net/3nXcS/2/

Update

When you console.log() the e.bubbles variable it returns false. So you can't use a binding method that requires bubbling (.delegate(), .live()).