捕获页面加载后创建的<img>标记的img加载错误（例如，通过AJAX）

Question

I'm using jQuery's error event handler to catch image loading errors. It looks like this:

$(function(){
  $('img').error(function(){
    // ... do something
  })
})

This works great for images that are in the DOM when the page is loaded. However, I'd like to catch the errors for <img> tags that get inserted via AJAX, too. I'd prefer to not have to run certain code after every AJAX call.

I'd like something like this, although this doesn't seem to work:

$('body').on('error', 'img', function(){
  // ... do something
})

Answer 1

If you don't want to set the binding after every ajax call, you might want to set it in a global ajax complete function

//Gloabal Ajax Complete
$("body").bind("ajaxSend", function(e, xhr, settings){
   //Sent
}).bind("ajaxComplete", function(e, xhr, settings){
   //Complete
   $('img').error(function(){
       // ... do something
   })
}).bind("ajaxError", function(e, xhr, settings, thrownError){
    //Error
});

Answer 2

You can use jQuery's live() or delegate() or on() methods depending on jQuery version you're using to register the error event on current and future image elements you add to the document. Refer http://api.jquery.com/live/