テーブル内に新しい行を追加した後にJqueryを追加するイベントなし

Question

これは私の問題です。テーブルに新しい行を追加します。この行には、クリック可能でイベントを発生させるボタンがあります。私は、ソリューションのトンを見つけましたが、それらのそれぞれは、この方法が含まれています

.on('click', 'button', function(){  
//do something  
}); 

では（のみクリック可能性を活性化させる）この場所でその関数呼び出しのないソリューションを必要としています。 Reasenは、テーブル行を追加、編集、削除するための3つの異なるAjaxパーツがあります。私はこれをcontentEditableテーブルで制御します。したがって、各行にはこの行を編集および削除するボタンが表示されます。新しい行を挿入すると、新しい行にこれらのボタンが表示されます。私のボタンは、上記の例のように実行させるために、私はこのような構造を得る：このところで

// AJAX for edit row 
do something 

// AJAX for delete row 
do something 

// AJAX for add row 
$('#editTable > tbody:last').append('<tr><td><button>DELETE</button></tr><td>'); 

$('#table').on('click', 'button', function() { 
    // AJAX for delete row 
    do something 
}); 

を、私は問題を見て、私は二回、完全なAJAX-削除部分を記述する必要があります。

理論的には簡単ですが、削除ボタンのクリックイベントをアクティブにしてクリックすると、AJAXの削除部分が呼び出されます。

しかし、私はこのような簡単な解決策を見つけました。

は...君たちが私のための1つを持っている

おかげで多くのことを願っています！

Answer 1

あなたはこのコードを使用する必要があり、動的に追加されたコンテンツのためのクリックイベントを追加したい場合は、次のクラスでシンプルtd要素について

$(document).on('click', 'yourcontent', function (event) { 
    // ... 
}); 

を：追加したボタンにグローバルクラスなどを付け

$(document).on('click', 'td.myclass', function (event) { 
    // ... 
}); 

Answer 2

をdeleteイベントデリゲートon()を使用してすべてのボタンに対して1つのイベントを追加するには、次の例を参照してください。

JS：

$('#editTable > tbody:last').append('<tr><td><button class="delete">DELETE</button></tr><td>'); 

$('body').on('click', '.delete', function (event) { 
    //Your code here 
}); 

この情報がお役に立てば幸いです。

---

$('body').on('click', '#add', function (event) { 
 
    $('#editTable').append('<tr><td>test<td><td><button class="delete">DELETE</button></tr><td>'); 
 
}); 
 

 
$('body').on('click', '.delete', function (event) { 
 
    alert("AJAX for delete row"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="add">Add row</button> 
 
<table id="editTable"> 
 
    <thead> 
 
     <th>TEST</th> 
 
     <th>Action</th> 
 
    </thead> 
 
</table>