javascript - 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-item.png");
        });

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

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