クリックイベントが動作しない！という場合、まずはクリックする対象がAjaxなどで遅延読み込みされている要素かどうか確認しましょう。
そのような場合は、記述方法に注意が必要です。
目次
この書き方はNG
jQueryでクリックイベントを実装する時、以下のようにすると簡単に記述できますよね。
$(function(){
$('クリックする要素').click(function(){ /* 処理内容 */ });
});が、この方法では遅延読み込みさせた要素にイベントを登録することはできません！
上記コードの$('クリックする要素')は、ドキュメントを読み込んだ時点ではまだ存在していないからです。
.on()でdocumentから指定すると解決
ではどうするればよいのか。以下のように記述しましょう。
$(function()){
$(document).on('click', 'クリックさせる要素', function(){ /* 処理内容 */ });
});$(document)は必ず存在しているので、遅延読み込みさせた要素を指定しても、無事クリックイベントが登録できます。
コメント
コメント一覧 （3件）
$(document).on(‘click’, ‘クリックさせる要素’, function(){ /* 処理内容 */ });
と書いても動作しない場合は何か考えられる原因はあるでしょうか？
ちなみに
$(document).on(‘mousedown’, ‘クリックさせる要素’, function(){ /* 処理内容 */ });
だと動作します。
クリックさせる要素はdivで、ID指定やクラス名での指定もやってみましたが結果は変わりませんでした。
対象のdivの子要素が反応しているかもしれません。
子要素にclickイベントを設定していたりしませんか？
もしくは、 event.target や this で取得されている要素が子要素になってしまっているかもしれません。
素晴らしい。
うまくいきました。