###前提・実現したいこと
jquery.balloon.jsを使って吹き出しを表示させようとしています。
前もって用意したHTMLの要素に対しては問題なく吹き出しが表示されるのですが、「動的にimgを挿入」のソースコードのように動的に後から追加した要素に対しては、吹き出しが表示されませんでした。
###動的にimgを挿入
javascript
1$.ajax({ 2 url: "xml/image.xml", 3 type: "GET", 4 dataType: "xml", 5 timeout: 1000, 6 error: function(){ 7 alert("ロード失敗"); 8 }, 9 success: function(xml){ 10 $(xml).find("image").each(function(){ 11 var img_url = $(this).attr("url"); 12 $(".left ul").append('<li><img src="' + img_url + '" class="img-list" title="ここが消えてしまいます"></li>'); 13 }); 14 } 15}); 16
そこで対策として、「方法1」のソースコードのように記述したところ、うまく吹き出しが表示されるようになりました。
###方法1
javascript
1$(document).on({ 2 'mouseenter' : function(){ 3 $(".img-list").balloon(); 4 } 5});
しかし、吹き出しのスタイルを変更したいと思い、「方法2」のソースコードのように変更を加え、吹き出しを表示させようとしました。
すると、はじめはうまく吹き出しが表示されていたのですが、何回かマウスオーバーを繰り返していると、吹き出しが表示されなくなってしまいました。
そこで原因を調べるためにChromeの開発者モードで調べたところ、<img>のtitle属性が消えてしまっていました。
方法1と方法2でこのような違いが表れた原因は何なのでしょうか?
また、解決策も教えていただけると助かります_(..)
###方法2
javascript
1$(document).on({ 2 'mouseenter' : function(){ 3 $('.img-list').balloon({ 4 tipSize: 24, 5 css: { 6 border: 'solid 4px #5baec0', 7 padding: '10px', 8 backgroundColor: '#666', 9 color: '#fff' 10 } 11 }); 12 } 13});
###追記
動的に生成したものではない要素に対して同じコードで実験したところ、同じような結果になりました。
そこで、動的に生成した要素ではないため、「$(document).on({ ~」の部分を消して実験してみたところ、問題なく動きました。
「$(document).on({ ~」の部分に問題があるのでしょうか?
何か根本的な部分が間違っている気がしますが…
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。