質問: jQueryの仕様について質問です。 下記サイトの「なぜ上級者向けのイベント構文を覚えないといけないのか?」の項目で、 以下の通りの説明がありました。 jQuery入門 設計力を学ぶデザインドリル|イベント(1) > > なぜ上級者向けのイベント構文を覚えないといけないのか? > > 初心者向けのイベント構文は、動的な要素(プログラムで後から追加された要素)に対応していません。 > > そのため、インタラクティブなコンテンツでは対応できない場合があるのです。 > > このサンプルではイベントの処理はdiv要素をクリックしても「click!」と表示されません。 > > > 実際に動作テストも行いましたが、確かに.appendToイベントで追加されたdiv要素をクリックしても、 「click!」と表示されず、.textイベントが動作していないことを確認しました。 しかしながら、HTMLのbody内に最初からdiv要素が存在していた場合、 最初から存在してdiv要素をクリックする事で、.appendToイベントで追加されたdivに対しても、.textイベントが動作します。 仕様上の問題だと思いますが、ちょっとここの仕様が思うように呑み込めず、 ググっても詳細について明確な回答が拾えなかったので、 誰か詳しい方の解説をいただきたく質問しました。 ▼初心者向けのイベント構文 ``` $("div").click(function (){ $("div").text("click!"); }); $("").appendTo("body"); ``` ``` ``` ▼ ![bodyに既存のdivがない場合](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/bcb4294102c91e31afffda82a88e02d3.png) ▼ ![bodyに既存のdivがある場合](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/094d7dd2ed23decf95756a78d5362011.png)
回答: > > 仕様上の問題だと思いますが、ちょっとここの仕様が思うように呑み込めず、 > > ググっても詳細について明確な回答が拾えなかったので、 > > 誰か詳しい方の解説をいただきたく質問しました。 > > > `$('div')`は、それを**実行した時点で**存在する``要素を拾います。 外側でイベントをセットするときに使った`$('div')`は、ページロード時点で存在したものだけになりますし、クリックイベントの中の`$('div')`は、クリックした時点で存在するものを拾います。