snippet jQuery

【jQuery】append等、動的に追加した要素にclickイベントが発生しない時の対処法

本ページにはプロモーションが含まれる場合があります

append等で動的に追加した要素に対して直接clickイベントを追加しても動作しません。
jQueryのonメソッドは初期時に存在する要素に対してのみclickイベントを追加するためです。
動的に追加した要素に対してclickイベントを追加するためには、下記のような書き方をすればOKです。

jQuery

$('先祖セレクタ').on('click', '追加した要素', function(){
  // クリックイベント処理
});

NGな例

下のデモの「ボタンを追加する」を押すとピンクのボタンが追加されますが、追加されたボタンを押してもボタンは追加されません。

DEMO

ボタンを追加する

HTML

<div class="wrap">
  <a href="" class="button-01 btn-unclickable">ボタンを追加する</a>
</div>

jQuery

$('.btn-unclickable').on('click', function(){
  $(this).after('<a href="" class="button-02 btn-unclickable">ボタンを追加する</a>');
});

OKな例

下のデモの「ボタンを追加する」を押すとピンクのボタンが追加され、追加されたボタンを押すと更にピンクのボタンが追加されます。

DEMO

ボタンを追加する

HTML

<div class="wrap">
  <a href="" class="button-01 btn-clickable">ボタンを追加する</a>
</div>

jQuery

$('.wrap').on('click', '.btn-clickable', function(){
  $(this).after('<a href="" class="button-02 btn-clickable">ボタンを追加する</a>');
});

知らないとはまりがちですが、書き方自体はとても簡単です。

-snippet, jQuery