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.
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()).
img elements. Any other elements in the htmlData will be lost. Use this instead: var output = $(htmlData); output.filter('img').error(function () {$(this).hide();}); $(<selector>).html(output);. Regardless, I think this is precisely what the OP was trying to avoid.
.end() to the end of the jQuery chain to return the the parent selector. The benefit to this method is that it only binds the events to the elements necessary, no bubbling needed which is a performance benefit.live would be better for performance, since you only bind the event handler on 1 element (the document).error event does not bubble up to the document.
The $("img").live method is supposed to work, if not you can try livequery(Livequery)
Try,
$("img").livequery('error', function(){$(this).hide();})
