clickイベントが効かない?appendで後から追加した要素にクリックイベントを追加する方法

jQueryを使用していると.click()で手軽にクリックイベントを設定することができますが、.append()などで後から追加したDOM要素に.click()を指定しても反応しないので、その対処法を今回ご紹介します。

DEMO

対策前

Click Me
Add

対策後

Click Me
Add

コード

変更前

変更後

冒頭で説明した通り、jQueryで要素を指定するときに、$('.demo_click_item').click()と指定していると、後から追加された.demo_click_itemにはクリックイベントを追加されません。(対策前がそのコードです)

対策後では何が違うかというと、まず.click()ではなく.on()を使用しています。どちらも同じクリックイベントを追加するコードですがonの方がclickより汎用性が高く使いやすいので.click()を使用している人は.on()を使用するようにしましょう。(jQuery ver 1.7から使用可能、clickとonの違いについては別記事で紹介します)

そして、対策後のコードを見ていただければわかると思いますが、$('.demo_wrap').on('click','.demo_af_click_item',function(){});という記述になっています。

これは、.demo_wrap要素(親要素)に対してイベントを設定することで間接的に.demo_af_click_item(子要素)にイベントを設定しています。.demo_wrapは最初からある要素なので、そこにイベントを追加することであとから追加した要素に対してもイベントが発生するようになっています。ですので.demo_wrapは最初からある要素でなければなりません。

まとめ

後から追加する要素に対してクリックイベントを設定する場合は、そのクリックする要素の親要素に対して.on()でイベントを設定しましょう。また、その他の場合でも.click()ではなく.on()を使うようにしていきましょう。

では。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。