- ベストアンサー
jQueryのappendで追加したdivにclickイベント
- jQueryのappendで追加したdivにclickイベントは使用できるのでしょうか？
- 最初からあるdivでは正常に動作するが、appendで後付したdivではうまく動作しない
- どのようにすればappendで追加したdivにもclickイベントを適用させることができるのかを教えてください
- tonpei3631
- お礼率37% (10/27)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
No1です。 ＞ただ、.testに対して実行されるタイミングでは確実にappendされて ＞います。 それだったら、こういう（↓）記述にはらないのでは？ ＞$(function(){ ＞$("div.test").click(function(){ ～～～ クリックしてappendし、その後クリックすれば背景が変わる例。 （No2でも書いたように、クリックするたびにappendされます。） <html> <head> <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> <script type="text/javascript"><!-- function app(){ $(".class").append("<div class=test style=\"height:100;\">test word</div>"); $("div.test").click(function(){ this.style.backgroundImage = "url(./img/test.gif)"; }); } // --></script> </head> <body> <div class="class">here</div> <button onclick="app()">append実行</button> </body> </html>
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
スクリプト全体の構成が不明なので、よくわかりませんが… ＞＞質問文で気になるのが、appendのタイミング。 というのは ＞$(".class").append("<div class=test></div>"); が実行されるのは、どの様なタイミングで、そのときに$(".class")が確実に存在しているかということです。 ＞appendのタイミングですが、click()でユーザがあるDIVをクリックしたタイ ＞ミングで.classをappendしています 「.classをappend」の意味がわかりませんが、上記の 「$(".class").append("<div class=test></div>");」が、クリックの処理の中で実行されるのでしょうか？ 何回もクリックすると、その数だけ増えるようになっているということ？ ＞やはりページロード時に存在しないdivでは動作しないのでしょうか？ 質問の意味がわかりかねますが、存在しないオブジェクトに対して、何かを実行しようとしても、オブジェクトが特定できないので、実行できません。 （エラー表示するかどうかなどは、ブラウザにより違うみたい） ＞＞という処理をしたいのですが、うまくできません そもそも、どううまくいかないのでしょうか? （例えば、appendした<div>が正しく生成されているかどうかなどを、確認してみましたか？） 回答No1で実行できているのは、確認されましたか？ それとはどのように違うのですか？
- fujillin
- ベストアンサー率61% (1594/2576)
jQueryはほとんど知りませんが… できないはずはないと思います。 $(function) のタイミングはDOM構築前に実行されるという記事があったので、そのせいかとも思いましたが、 http://kawa.at.webry.info/200801/article_15.html 実験してみたところ、以下でもちゃんと動作するみたい。 <html> <head> <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> <script type="text/javascript"><!-- //$(document).ready(function(){ $(function(){ $(".class").append("<div class=test>test word</div>"); $("div.test").click(function(){ this.style.backgroundImage = "url(./img/test.gif)"; }); }); // --></script> </head> <body> <div>start</div> <div class="class">here</div> <div>end</div> </body> </html> 質問文で気になるのが、appendのタイミング。 読込みとの関係で、.classが無いと実行しようがないけれど…？
補足
ご回答ありがとうございます。検証までしていただいて感謝です！ appendのタイミングですが、click()でユーザがあるDIVをクリックしたタイミングで.classをappendしています。なので、ページロード時には.classは存在しないです。 ただ、$("div.test").click(function(){ が実行されるタイミングでは、.classが必ずappendされています。 やはりページロード時に存在しないdivでは動作しないのでしょうか？ たびたびすみませんが、ご回答の程宜しくお願いいたします。
補足
質問が分かりづらくてすみません。。。 ＞＞$(".class").append("<div class=test></div>"); が実行されるタイミングでは.classは確実に存在しています。 ＞「.classをappend」の意味がわかりませんが、 すみません。間違えました。 正しくは「.classに.testをappend」しています。 ＞質問の意味がわかりかねますが、存在しないオブジェクトに対して、何かを実行しようとしても、オブジェクトが特定できないので、実行できません。 ページロード時には、.testが存在しないのですが、あるタイミングで.classに.testがappendされます。ただ、.testに対して実行されるタイミングでは確実にappendされています。 ＞回答No1で実行できているのは、確認されましたか？ 確認しました。 ページロード直後にappendでオブジェクトを追加した時には動作するようです。しかし、click()などを使って後から追加したオブジェクトでは動作しないようです。これをどうにかして後から追加したオブジェクトで動作させたいのですが、、、 ＞appendした<div>が正しく生成されているかどうかなどを、確認してみましたか？ <div>は正しく生成されています。 理解不足で申し訳御座いませんが、宜しくお願いいたします。