その他

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

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

こういう時の対処法。

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

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

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

解決法

問題のコード

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

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

解決策

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

ポイント

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

  • この記事を書いた人

コウダイ

文系・ノースキル・未経験・アラサー・地方住み・残業100時間超えの社畜ホテルマンから都内IT系上場企業のフルリモートWebエンジニアに転職した人。

都内IT系上場企業に勤務するWebエンジニア5年目|プログラミングスクールのテックキャンプ公式アンバサダー|新卒で手取り18万の地方ホテルマン6年→挫折→プログラミングを900時間勉強→転職活動100社以上応募→アラサー未経験から7ヶ月でフルリモートのWebエンジニアに転職し年収150万円UP|34歳2児のパパ|ブログ歴4年→月間6,000PV|エンジニア転職ノウハウ、プログラミング、Web制作、副業での稼ぎ方など、「時間や場所に縛られずに稼ぐ」方法を発信しています。

-その他