後輩に動的に追加した要素のイベントが拾えませんと相談されたのでサンプルを書きました。
動的に追加した要素のイベントを拾えない例
例えば「行追加」ボタンを押したらテーブルに行が追加される場合です。
最初に表示されている行の「イベント発火！」ボタンを押すと alert が出ますが、追加した行のボタンを押してもイベントが拾えません。
<table>
<tr>
<th>
表
</th>
</tr>
<tr>
<td>
<button type="button" class="alert-btn">イベント発火！</button>
</td>
</tr>
</table>
<br />
<button type="button" id="addRow">行追加</button>$(function(){
var tr = '<tr><td><button type="button" class="alert-btn">イベント発火！</button></td></tr>';
$('#addRow').click(function(){
$('table').append(tr);
});
$('.alert-btn').click(function(){
alert('ボタンがクリックされました');
});
});See the Pen cannot handle added row event by mt (@mtakeda) on CodePen.
動的に追加した要素のイベントを拾う方法
body のイベントを拾うようにすると動的に追加した要素のイベントを拾うことができます。
$(function(){
var tr = '<tr><td><button type="button" class="alert-btn">イベント発火！</button></td></tr>';
$('#addRow').click(function(){
$('table').append(tr);
});
$('body').on('click', '.alert-btn', function(event){
alert('ボタンがクリックされました');
});
});See the Pen handle added row event by mt (@mtakeda) on CodePen.
