その他

jQueryでクリックイベントが発火しないときの対処法

「イベントを設定したのに発火しない。」

こういう時の対処法。

どういう時にこの現象が起きたかというと、ボタンが動的にどんどん追加されていく時です。

一番上のボタンは通常通りイベントが発火するのですが、

どんどん追加されていく2個目以降のボタンが反応せず、この解決法に半日以上費やしました。

解決法

問題のコード

$('.btn').click(function () {
  alert(アラート);
});

動的に追加された要素にはイベントが登録されないようです。

解決策

$(document).on('click','.btn',function () {
  alert(アラート);
});

ポイント

ポイントは要素そのものではなくウェブーページ全体にイベントを設定する事です。→ $(document).on

  • この記事を書いた人

コウダイ

都内のWeb系自社開発企業に勤務するエンジニア|33歳1児のパパ|ブログ歴4年→月間6,000PV|新卒で手取り18万のホテルマン6年→プログラミングを900時間勉強→100社以上応募しアラサー未経験から7ヶ月でフルリモートのWEB系自社開発エンジニアに転職し年収100万円UP|【人生を自由に、ノンストレスで生きる】をテーマに、30歳で文系・異業種未経験からITエンジニアに転職したノウハウの他、プログラミングやブログで稼ぐ方法など、「時間や場所に縛られずに稼ぐ」方法を発信しています。

-その他