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
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"); });
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); }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With