Ошибка JQuery на изображении не работает на динамических изображениях?

У меня есть следующий код js,

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

Это событие не запускается. Я уверен, что много сломанных изображений

Ответ 1

Проблема в том, что вы не можете использовать event delegation для события error в объекте документа, потому что в отличие от других событий (таких как onclick), событие onerror не передается объекту документа.

Вместо этого используйте обычную привязку событий:

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

P.S. При выполнении этой команды это будет работать только с изображениями, которые уже находятся в DOM.

Для обработки динамически добавляемых изображений, вам необходимо прикрепить это событие к каждому изображению, которое вы добавляете в DOM. Вот пример:

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

Ответ 2

Я знаю, это старый вопрос, но, возможно, кто-то ищет лучшее решение:

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

Этот код присоединяет прослушиватель событий ошибки к тегу img при загрузке тела и после каждого вызова ajax.