JavaのWebアプリケーション開発フレームワークによる、Webサイト開発の顛末記です。

EclipseのMavenを使った、Spring-MVC、Thymeleaf、MyBatis 等のプログラミングテクニックを、
備忘録的に記録しています。実際に動くソースコードを多用して説明していますので、
これからEclipseや、Spring-MVCを始めたいと思っている人にとって、少しでも参考になれば幸いです。
■応用の森　jQuery　clickイベントが効かない
jQueryのclick()イベントを使っていると、場合によってはclickイベントがハンドリングできない場合があります。
HTMLとして最初から書かれている（静的な）セレクタにイベントを設定する場合は、
click()イベントでなんら問題はありませんが、
jQueryのappendメソッドなどで、後から動的に追加された要素のセレクタにclick()イベントを設定しても
イベントがハンドリングできません（クリックしても反応しません）。
これは静的に記述されたリンクです。クリックしてみてください。

上のリンクをクリックすると、jQueryの $("#id_static").click()　イベントが実行され、
アラートが表示されます。



上のボタンをクリックすると、動的にリンクセレクタが追加されます。
セレクタクリック時のclick()イベントハンドラを定義していますが、クリックしてもイベントが反応しません。



上のボタンをクリックすると、（１）と同様に、動的にリンクセレクタが追加されます。
こちらはセレクタクリック時のイベントを on()イベントハンドラで定義しているので、
リンクをクリックするとアラートが表示されます。
整理すると、
　$(function(){
　　$("セレクタ名").click(function () {
　　　　:
　　});
　});
のように定義されたjQueryのclick()イベントメソッドは、
appendメソッド等で、後から動的に追加された要素に対してはイベントハンドリングができない。

動的に追加される要素がある場合は、click()イベントではなく、
　$(function(){
　　$(document).on('click', 'セレクタ名', function () {
　　　　　:
　　　});
　});
のように、on()イベントで登録しましょう。


このページのソースです。
jQuery/JavaScriptの小技集  clickイベントが効かない
HOME