Jquery về lỗi hình ảnh không hoạt động trên hình ảnh động?

Question

Tôi có mã js sau,

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

Sự kiện này không được kích hoạt. Tôi chắc rằng có rất nhiều hình ảnh bị hỏng

Answer 1

Vấn đề là bạn không thể sử dụng event delegation cho sự kiện error trên đối tượng tài liệu, bởi vì không giống như các sự kiện khác (chẳng hạn như onclick), sự kiện onerror không được sủi bọt đối tượng tài liệu.

Sử dụng sự kiện bình thường ràng buộc thay vì:

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

• Tái bút: - Điều này sẽ chỉ hoạt động trên những hình ảnh đã có trên DOM khi lệnh này được thực thi.

---

Để xử lý hình ảnh tự động thêm vào như là tốt, bạn cần phải đính kèm sự kiện này để mỗi hình ảnh bạn thêm vào DOM. Dưới đây là một ví dụ:

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

tôi biết, một câu hỏi cũ của nó, nhưng có lẽ ai đó đang tìm kiếm một giải pháp tốt hơn:

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

Mã này gắn người nghe lỗi sự kiện vào thẻ img trên cơ thể tải và sau mỗi cuộc gọi ajax.