質問: ### 前提・実現したいこと jQueryのAjaxによってXMLをHTMLに表示させたものに対してクリックイベントなどの処理を行いたいと考えています。 ### 該当のソースコード ``` $(function(){ $.ajax({ url: "xml/parts_data.xml", type: "GET", dataType: "xml", timeout: 1000, error: function(){ alert("ロード失敗"); }, success: function(xml){ $(xml).find("item").each(function(){ $(".rightbar ul").append(''); }); } }); //追加されたimgタグに対するクリックイベント $("#test1").click(function(){ parts_click(this); }); }); ``` 上記のようにして、img要素をクリックした際のイベントを記述したところ、何もクリックイベントが発生しませんでした。 一方、 ### 該当のソースコード ``` $(function(){ $.ajax({ url: "xml/parts_data.xml", type: "GET", dataType: "xml", timeout: 1000, error: function(){ alert("ロード失敗"); }, success: function(xml){ $(xml).find("item").each(function(){ $(".rightbar ul").append(''); }); } //追加されたimgタグに対するクリックイベント $("#test1").click(function(){ parts_click(this); }); }); }); ``` のようにクリックイベントを、success: function(xml)内に記述したところ、クリックイベントが発生しました。 何が原因だったのでしょうか? また、success: function(xml)外からでもクリックイベントを発生させる方法はあるのでしょうか? 根本的なところがわかっていないとは思いますが、回答を頂けると助かります_(._.)_
回答: 前者は `$("#test1").click()` をしたタイミングでDOMに「#test1」というエレメントがなかったため、クリックイベントを付ける対象が無いためで、後者は `success: function(xml){}` 内に `$("#test1").click()` があるならDOMに「#test1」というエレメントがあるのでイベントが登録できます。 記載されているコードは `success: function(xml){}` 外に `$("#test1").click()` が在るので、挙動としてどうなるかちょっとわかりません。 今ない要素にイベントを付ける際は「on」を使います。 ``` $( ".rightbar ul" ).on( 'click', 'img', function() { /* code */; }); ```