Jquery on imageエラーが動的イメージで機能していませんか？

Question

私はこのイベントがトリガされていない、次のJSに

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

をコードしています。私はこの問題は、（そのようonclickなど）他のイベントとは異なり、onerrorイベントがバブリングされていないので、あなたは、ドキュメントオブジェクト上errorイベントにevent delegationを使用することができない壊れた画像がたくさん

Answer 1

があるされていると確信していますドキュメントオブジェクトに追加します。代わりに結合

使用通常のイベント：

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

    $(destination).append(newImg); 
} 

Answer 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呼び出しの後にロードしてください。