Jquery on image error not working on dynamic images?

Question

I have the following js code,

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


        

Answer 1

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);
}

Answer 2

I know, its an old question, but maybe someone is looking for a better solution:

// The function to insert a fallback image
var imgNotFound = function() {
    $(this).unbind("error").attr("src", "/path/to/fallback/img.jpg");
};
// Bind image error on document load
$("img").error(imgNotFound);
// Bind image error after ajax complete
$(document).ajaxComplete(function(){
    $("img").error(imgNotFound);
});

This code attaches the error-event listener to the img tag on body load and after every ajax call.