Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery on image error not working on dynamic images?

Tags:

I have the following js code,

 $(document).on("error", "img", function () {             alert('a')             this.src = ResolveUrl("~/images/tree-item.png");         }); 

This event is not triggered. I am sure there are lot of broken images

like image 431
Imran Qadir Baksh - Baloch Avatar asked Sep 08 '13 12:09

Imran Qadir Baksh - Baloch


1 Answers

The problem is that you can't use event delegation for the error event on the document object, because unlike other events (such as onclick), the onerror event isn't being bubbled to the document object.

Use normal event binding instead:

$('img').on("error", function () {     this.src = ResolveUrl("~/images/tree-item.png"); }); 
  • P.S - This will work only on the images that are already on the DOM when this command is executed.

To handle dynamically added images as well, you need to attach this event to every image you add to the DOM. Here's an example:

function handleError() {     this.src = ResolveUrl("~/images/tree-item.png"); }  // Bind the event to the existing images on the DOM when the document is ready $(document).ready(function () {     $('img').on("error", handleError); }  // An example for a function that adds images dynamically function addImage(imgSource, destination) {     var newImg = $("img").on("error", handleError)                          .attr("src", imgSource);      $(destination).append(newImg); } 
like image 68
Itay Avatar answered Sep 20 '22 15:09

Itay