jquery.balloon.jsを動的に作成した要素に対して割り当てる方法

###前提・実現したいこと
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

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件

HTML
1<img alt="test1" id="img1">
2<div id="hoge"></div>
3

上記HTMLに対して、もしこんなふうにしてimg2へのclickが反映されないのでしたら

javascript
1<script>
2$(function(){
3  $('img').click(function(){
4    console.log($(this)[0].id);
5  });
6  $('#hoge').append('<img alt="test2" id="img2">');
7});
8</script>

このように変更してください

HTML
1$(function(){
2  $(document).on('click','img',function(){
3    console.log($(this)[0].id);
4  });
5  $('#hoge').append('<img alt="test2" id="img2">');
6});
7

投稿2016/09/01 02:45

yambejp

総合スコア114829

ベストアンサー

$( document ).on( { 'mouseenter' : function() { } } ); で設定されていますが、これは document にマウスエンターが起こるたびに関数を実行するので、同じ要素に対して何度も .balloon(); することになります。

JavaScript
1// $( document ).on ではなく $(document).ready( function() {} ); で。（ここではその短縮形を使っています）
2$( function() {
3	$( '.img-list' ).addClass( 'has_balloon' ).balloon( /* 省略 */ );
4} );

JavaScript
1// successに入れてる関数部分
2var $ul = $( '.left ul' );
3$( xml ).find( 'image' ).each( function() {
4	var img_url = $( this ).attr( 'url' );
5	$ul.append( '<li><img src="' + img_url + '" class="img-list" title="ここが消えてしまいます"></li>' );
6} );
7$( '.img-list:not(.has_balloon)' ).addClass( 'has_balloon' ).balloon( /* 省略 */ );