###前提・実現したいこと
jQueryのAjaxによってXMLをHTMLに表示させたものに対してクリックイベントなどの処理を行いたいと考えています。
###該当のソースコード
javascript
1$(function(){ 2 $.ajax({ 3 url: "xml/parts_data.xml", 4 type: "GET", 5 dataType: "xml", 6 timeout: 1000, 7 error: function(){ 8 alert("ロード失敗"); 9 }, 10 success: function(xml){ 11 $(xml).find("item").each(function(){ 12 $(".rightbar ul").append('<li><div id="change-pattern1" class="btn-item"><img src="' + $(this).find('sample_src').text() + '" id="' + $(this).find('id').text() + '" title="' + $(this).find('texture_src').text() + '" class="img_list"></div></li>'); 13 }); 14 } 15 }); 16 //追加されたimgタグに対するクリックイベント 17 $("#test1").click(function(){ 18 parts_click(this); 19 }); 20});
上記のようにして、img要素をクリックした際のイベントを記述したところ、何もクリックイベントが発生しませんでした。
一方、
###該当のソースコード
javascript
1$(function(){ 2 $.ajax({ 3 url: "xml/parts_data.xml", 4 type: "GET", 5 dataType: "xml", 6 timeout: 1000, 7 error: function(){ 8 alert("ロード失敗"); 9 }, 10 success: function(xml){ 11 $(xml).find("item").each(function(){ 12 $(".rightbar ul").append('<li><div id="change-pattern1" class="btn-item"><img src="' + $(this).find('sample_src').text() + '" id="' + $(this).find('id').text() + '" title="' + $(this).find('texture_src').text() + '" class="img_list"></div></li>'); 13 }); 14 } 15 //追加されたimgタグに対するクリックイベント 16 $("#test1").click(function(){ 17 parts_click(this); 18 }); 19 }); 20}); 21
のようにクリックイベントを、success: function(xml)内に記述したところ、クリックイベントが発生しました。
何が原因だったのでしょうか?
また、success: function(xml)外からでもクリックイベントを発生させる方法はあるのでしょうか?
根本的なところがわかっていないとは思いますが、回答を頂けると助かります_(..)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/04/19 06:53