clickイベント(jQuery)の罠

Pocket

clickイベントが動かない

jQueryのclickイベントを使っているとうまく動かないときがある。
元々存在するDOMにclickイベントを設定するときは、期待した通りに動くが、jQueryのappendメソッドなどで後から追加した要素にclickイベントを設定するとクリックをしているのに動かないことがあります。
そういうときは、onメソッドを使うと解決できるので、その方法をご紹介致します。

clickイベントが効かない

appendメソッドなどで、動的に要素を追加してその要素にclickイベントを設定しても、全く動かない。
調べてみると、jQueryには、イベントの記述方法が二つあったので、うまくいかない例とうまくいった例を紹介します。

NGパターン

clickイベントを設定する簡単な方法は、click()メソッドを使った書き方です。

$(".selector").click(function() {
  // クリックすると行われる処理
});

このような書き方だと、appendメソッドなどで後から追加した要素をセレクタに指定しても、clickイベントが動きません。
簡単な処理を行うだけだとこのような書き方でかまわないですが、少し複雑になってくるとうまくいかないことが多いので、click()メソッドでを使った書き方はあまりおすすめではありません。

生成したDOM要素にイベント設定する方法

次は、appendメソッドなどで後から追加した要素をセレクタに指定しても、しっかりと動く例を示します。
先ほどの例では、click()メソッドを使っていましたが、次の例では、on()メソッドを使います。

$(document).on('click', '.selector', function(){
  // clickイベントで発動する処理
});

on()メソッドの第一引数にイベントの種類、第二引数にイベントを紐づけたいセレクタを書きます。
on()メソッドのセレクタには、documentを指定していますが、これは後から動的に追加した要素にもイベントを紐づけれるようにdocumentで待ち受けている状態です。

また、on()メソッド以外にも、bind()メソッドや、live()メソッドでも同様のことができるのですが廃止されるようなので、jQuery1.7以降ならonメソッドを使ったほうがよさそうです。

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>