[jQuery] 基本メモ: 動的に作成された要素にイベントを割り当てる

ドキュメントが読み込まれた時点で存在する要素に対しては、セレクタで選択してイベント関係のメソッドを使ってイベントハンドラを設定できる。しかし、動的に作成された要素(ドキュメント読み込み時点では存在していない要素)に対しては、これは不可能。

動的に生成された要素を操作するには、ドキュメント読み込み時点で存在する親要素のonメソッドを使う。

$(親要素).on(イベント, 対象要素, コールバック関数);

1	$(親要素).on(イベント, 対象要素, コールバック関数);

サンプルコード

<p>Hello</p>
<button>add</button>

1 2	<p>Hello</p> <button>add</button>

$('button').click(function() {
    var p = $('<p>').text('vanish!').addClass('vanish');
    $(this).before(p);
});
$('body').on('click','.vanish', function() {
    $(this).remove();
});

$('button').click(function() {

var p = $('<p>').text('vanish!').addClass('vanish');

$(this).before(p);

});

$('body').on('click','.vanish', function() {

$(this).remove();

});

サンプルコード

関連記事