web-dev-qa-db-ja.com

動的に追加されたテーブル行に対してクリックイベントが発生しない

以下を使用して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);
});

何も起こりません。

jqueryhtml-tableclickrowadd
15
user1770849

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

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

onのスコープを制限するには、IDまたは親のクラスのいずれかで最も近い親セレクターを指定します。

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

委任されたイベント

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

31
Adil

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

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

existingの行にイベントをバインドした後、行を動的に追加します。 委任イベントアプローチ を使用して問題を修正できます。

$("#table").on("click", "tr", function(e) {
    alert(this.id);
});
2
VisioN
$(document).on('click', "#tbl-body tr td", function(e) { 
    alert(this.id);
});
1
khalid khuz nain