9

重複の可能性：
jQuery-クリックイベントは動的に生成された要素では機能しません

新しいテーブル行を追加するクリック可能な追加ボタンがあります。テーブルの行には削除ボタンが含まれています。新しい行を動的に追加すると、ボタンはクリックイベントを発生させませんが、ページの読み込み時にボタンが存在する場合は、正常に機能することに気付きました。どうすればこれを修正できますか？

Javascript：

$('#btnAdd').click(function () {

        var newTr = '<tr><td><input id="column_0" name="column[0]" style="width:40%;" type="text" /> <img alt="Delete-icon24x24" class="btnDel clickable" id="" src="/assets/delete-icon24x24.png" /></td></tr>';
        $('#columns').append(newTr);
    });

$('.btnDel').click(function () {
    alert('hey');
    console.log('test');
    var row = $(this).closest("tr");
    alert(row);

    row.remove();
});
4

4 に答える 4

16

イベント委任を使用する必要があります。

$("table").on("click", ".btnDel", function () {
    /* Respond to click here */
});

その理由は、現在DOMに存在しないアイテムにハンドラーをバインドできないためです。ただし、ハンドラーをデリゲートターゲット（DOMに残る親要素）にバインドすることはできます。クリックするとDOMがバブルアップし、最終的にデリゲートターゲットに到達します。

のクリックをリッスンし、それらが要素tableからのものであるかどうかを評価します。.btnDelこれにより.btnDel、ページの読み込み時に読み込まれた要素からのクリックと、後で動的に追加された要素からのクリックに応答するようになります。

最後に、ID値を再利用しないでください。

于 2013-01-16T04:57:44.357 に答える
7

動的に追加されたhtml要素のイベント委任にはon（）を使用する必要があります。可能であれば、動的に追加された要素の要素にイベントを委任parentできます。またはに委任できますdocument。

$(document).on('click', '.btnDel', function () {
    alert('hey');
    console.log('test');
    var row = $(this).closest("tr");
    alert(row);

    row.remove();
});

委任されたイベント

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

詳細については、この記事を読んでください。イベント委任について

于 2013-01-16T04:58:03.793 に答える
3

使用するon()

$(document).on('click', '.btnDel', function(){
  //your code
})
于 2013-01-16T04:58:23.517 に答える
0

これはうまくいくでしょう

    $('#btnAdd').click(function () {

       var newTr = '<tr><td><input id="column_0" 
       name="column[0]"style="width:40%;"type="text" />
      <img alt="Delete-icon24x24" class="btnDel clickable" id="" 
       src="/assets/delete- icon24x24.png" /></td></tr>';
    $('#columns').append(newTr);

       $('.btnDel').click(function () {
       alert('hey');
       console.log('test');
       var row = $(this).closest("tr");
       alert(row);

       row.remove();
     });



      });
于 2013-01-16T05:51:27.413 に答える