Q&A
書いている途中に解決済になってた＼(^o^)／
jQueryのload()で追加する要素に対して画像読み込み失敗時に関数を実行したいです。
load()で追加する要素には<img>要素以外も含まれます。
lang
1$("img").on("error",function(){...});
では追加要素についてイベントが発生しませんでした。
何か良い方法はないですしょうか？
jQueryに解決方法を限る必要はありません。
よろしくお願いいたします。
回答2件
0
ベストアンサー
loadのコールバックで処理すればできるのではないでしょうか？
コールバックでないと読み込み完了前などに処理してしまうので、要素が存在しないと思います。
投稿2014/12/04 04:51
総合スコア1356
0
単純に、
lang
1$(document).on('error', 'img', function(){ /* ... */ });
でいいのかと思いましたが、error イベントはバブリングしないからこれだと拾えないのですね。
次のようにするとどうでしょう？（load で DOM に要素が突っ込まれた後にイベントを設定しているので取りこぼしがありそうですが・・・）
lang
1<!doctype html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title></title> 6</head> 7<body> 8<div id="main"></div> 9<button id="button">button</button> 10<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script> 11<script> 12$(function() { 13 $('#button').on('click', function(){ 14 $('#main').load('zzz.html', function(){ 15 $(this).find('img').on('error', function(){ 16 console.log("error: " + this.src); 17 }); 18 }); 19 }); 20}); 21</script> 22</body> 23</html>
投稿2014/12/04 07:55
総合スコア4514
よくある事象です…
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2014/12/04 05:02
2014/12/04 05:27
2014/12/04 05:28
2014/12/04 07:32