クリックイベントが動作しない!という場合、まずはクリックする対象がAjaxなどで遅延読み込みされている要素かどうか確認しましょう。

そのような場合は、記述方法に注意が必要です。

目次

この書き方はNG

jQueryでクリックイベントを実装する時、以下のようにすると簡単に記述できますよね。

$(function(){
    $('クリックする要素').click(function(){ /* 処理内容 */ });
});

が、この方法では遅延読み込みさせた要素にイベントを登録することはできません!

上記コードの$('クリックする要素')は、ドキュメントを読み込んだ時点ではまだ存在していないからです。

.on()でdocumentから指定すると解決

ではどうするればよいのか。以下のように記述しましょう。

$(function()){
    $(document).on('click', 'クリックさせる要素', function(){ /* 処理内容 */ });
});

$(document)は必ず存在しているので、遅延読み込みさせた要素を指定しても、無事クリックイベントが登録できます。

- Thank you for reading. -

あなたの1クリックが励みになります\( ̄ー ̄)/

コメント

コメントする

CAPTCHA


TOPへ Top