質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
XML

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

2581閲覧

jQueryのAjaxによってXMLをHTMLに表示させたものに対して処理を行いたい。

tarotarosu

総合スコア114

XML

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2016/04/19 03:52

###前提・実現したいこと
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)外からでもクリックイベントを発生させる方法はあるのでしょうか?
根本的なところがわかっていないとは思いますが、回答を頂けると助かります_(..)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

前者は $("#test1").click() をしたタイミングでDOMに「#test1」というエレメントがなかったため、クリックイベントを付ける対象が無いためで、後者は success: function(xml){} 内に $("#test1").click() があるならDOMに「#test1」というエレメントがあるのでイベントが登録できます。

記載されているコードは success: function(xml){} 外に $("#test1").click() が在るので、挙動としてどうなるかちょっとわかりません。

今ない要素にイベントを付ける際は「on」を使います。

JavaScript

1$( ".rightbar ul" ).on( 'click', 'img', function() { /* code */; });

投稿2016/04/19 04:07

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tarotarosu

2016/04/19 06:53

詳細なご回答ありがとうございました! ご回答中にありますように、「on」について調べ、試してみたところうまく動きました。 ありがとうございました! 似たような質問をもう一つさせていただきましたので、そちらのほうも見ていただけると助かります_(._.)_ https://teratail.com/questions/32744
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問