CodeLab技術ブログ

プログラミング技術まとめ

[Jquery]クリックイベントが反応しない場合

Jqueryでクリックイベントが発生しない場合の対策について


クリックイベントは普通こんな感じで書くはずです。

$(".selector").click(function () {...});

ですが、これには問題があります。
動的に追加された要素には反応しません。
そういった場合のメソッドがあったのですがすべて廃止されて、以下に統一されました。

$(document).on('click', '.selector', function () { ... });

どのサイトにもこういう書き方で書いているのですが、どうもiOSだとこの書き方だと反応しない場合があるようです。
bodyとかdocumentは文書全体を指定したい場合に使いますが、iOSの場合は無視されてしまうらしいのです。

ということで以下のように

$(".container").on('click', '.selector', function () { ... });

コンテンツ全体をくくっているdivタグか何かにクラス名をつけてそれを指定してあげればよいようです。
まぁ、なるべく狭い範囲を指定したほうが動作が早くなる?はずなので、限られた範囲でクリックを検出したい場合は横着しないで範囲を指定してあげたほうが良いかと思います。

結論
clickメソッドは使うな。
onメソッドを使え。ただし、セレクタにdocumentやbodyは使うな。範囲を狭めろ。

コメントは受け付けていません。