17

次を使用してjQueryを介して行を追加する空のテーブルがあります。

$('#table > tbody:last').append('<tr id="' + symbol.Code1 + '"><td>' + symbol.Code1 + '</td><td>' + symbol.Code2+ '</td><td>' + symbol.Code3+ '</td></tr>');

すべて問題ありませんが、実装すると:

$("#table tr").click(function(e) {
    alert(this.id);
});

何も起こりません。

4

4 に答える 4

37

動的に追加された要素のクリック イベントをバインドするために使用できるイベント委任が必要です。クリックでバインドする方法は、既存の要素には適用されますが、後で追加される要素には適用されません。

$(document).on("click", "#table tr", function(e) {
    alert(this.id);
});

on最も近い親セレクターを ID または親のクラスで指定することにより、スコープを制限できます。

$('.ParentElementClass').on("click", "#table tr", function(e) {
    alert(this.id);
});

委任されたイベント

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされた時点で存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります。

于 2012-10-24T10:16:24.623 に答える
9

.onメソッドを使用する必要があります

$("#table").on('click','tr',function(e) { 
    alert($(this).attr('id')); 
});
于 2012-10-24T10:16:57.387 に答える
2

イベントを既存のイベントにバインドした後、行を動的に追加します。この問題を解決するには、委任されたイベント アプローチを使用できます。

$("#table").on("click", "tr", function(e) {
    alert(this.id);
});
于 2012-10-24T10:16:36.420 に答える