imgエラーイベントが期待どおりに動作しない

jQueryと<img>タグのエラー処理に関する問題があります。私のコードは次のようになります。スクリプトはjsFiddle上で動作しますので、私はindex.htmlファイルに書き込む場合、私はではなく、求めているimgエラーイベントが期待どおりに動作しない

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <meta charset="utf-8"> 
    <title>welp</title> 
</head> 
<body> 
<a href="http://stackoverflow.com"><img src="www.stackoverflow.com/logo.png" alt="someFakeLink" width="150" height="78"/></a> 
    <script> 
     $(document).ready(function(){ 
      $("img").on("error", function(){ 
       $(this).hide(); 
       alert("AnnoyingPopups"); 
      }); 
     }); 
    </script> 
</body> 
</html>

。

これはjsFiddleではっきりと動作するので、私は困惑し、不満を募らせていますが、私のローカルマシンではそうしません。

フィドルのリンクはこちらです：https://jsfiddle.net/znq2y6h6/

が、私は誰も私にこれを説明することができます願っています。

出典

2017-03-02 jAndersen

あなたはあなたののコンソールですべてのエラーを持っていますかそれ？ –

こんにちは、私は私のコンソールで取得する唯一のエラーは、画像を読み込もうとしている404エラーです:) – jAndersen

イメージのsrcを 'http'と入力してみてください。だからあなたのイメージタグは次のように変更します。

<img src="http://www.stackoverflow.com/logo.png" alt="someFakeLink" width="150" height="78"/>

出典

2017-03-02 10:50:39

それは解決したようです。なぜそれが違いを生むのか教えていただけますか？ – jAndersen

これは予想される回答ですか？問題は、画像エラーがあるかどうかを特定し、それに応じて行動することです。しかし、受け入れられた答えは、エラーを修正し、エラーを特定するための解決策を提示しないように見える。すべての無効な画像ソースを修正し続けることはできません。 – Purus

答えは私が持っていた問題を解決します。したがって、私は答えとしてそれを受け入れましたか？他に何が言いたいのか分かりません。私はちょっとあなたが言うことをしようとしています。そして、私はおそらく、そのURLが有効かどうかを調べる何かに関数をラップすることができます。しかし、スクリプトはURLが正しいと仮定して実行されており、imagepathは404エラーを返します。 – jAndersen

申し訳ありませんが、私は間違いをたくさん作るので、例

IMGエラーイベントは、ドキュメントレディ機能を使用して、そうであれば、まずDOM要素ていた動作していないに確認してくださいドキュメント準備呼び出しとエラーイベントがバインドされます。これらは、スクリプトやHTML要素のための機能をwindow.onloadているときにエラーイベントがあなたのために使用されるこのコードはjsfiddleで @

を

を働いていないので、まだ呼ばれるその時のimg要素で

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>welp</title> 
 
</head> 
 
<body> 
 
<script> 
 
$(document).ready(function() 
 
{ 
 
    $("img").on("error", function(){// not working 
 
       $(this).hide(); 
 
       alert("AnnoyingPopups"); 
 
      }); 
 

 
function imagealertnotworking(e){alert('onerror image alert not working');} // not working 
 
}); 
 

 
function imagealertworking(e){alert('onerror image alert working');} // working 
 
</script> 
 

 

 

 
<a href="http://stackoverflow.com"><img src="www.stackoverflow.com/logo.png" onerror="eval(alert('on dom working alert1'),imagealertworking())" alt="someFakeLink" width="150" height="78"/></a> 
 
<a href="http://stackoverflow.com"><img src="www.stackoverflow.com/logo.png" onerror="eval(alert('on dom working alert2'),imagealertnotworking())" alt="someFakeLink" width="150" height="78"/></a> 
 
</body> 
 
</html>

出典

2017-03-02 12:53:08

imgエラーイベントが期待どおりに動作しない

答えて

関連する問題