Jquery bei Bildfehler funktioniert nicht bei dynamischen Bildern?

Question

Ich habe den folgenden Code js,

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

Dieses Ereignis nicht ausgelöst wird. Ich bin sicher, es gibt viele gebrochene Bilder

Answer 1

Das Problem ist, dass Sie nicht event delegation für das error Ereignis auf dem Dokument-Objekt, denn im Gegensatz zu anderen Veranstaltungen (wie onclick), das onerror Ereignis nicht eingeblasen verwenden können zum Dokumentobjekt.

Verwenden normale Ereignis statt Bindung:

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

• P. S - Dies wird nur auf den Bildern arbeitet, die bereits auf dem DOM sind, wenn dieser Befehl ausgeführt wird.

---

Um auch dynamisch hinzugefügt Bilder handhaben, müssen Sie jedes Bild dieses Ereignis messen Sie den DOM hinzufügen. Hier ein Beispiel:

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").attr("src", imgSource) 
         .on("error", handleError); 

    $(destination).append(newImg); 
} 

Answer 2

Ich weiß, seine eine alte Frage, aber vielleicht hat jemand eine bessere Lösung sucht:

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

Dieser Code legt den Fehler-Ereignis-Listener mit dem img-Tag auf Körper laden und nach jedem Ajax-Aufruf.