0

これは私が犯している恥ずかしいほど単純な間違いだと感じていますが、現時点ではそれを見ることができません。

行を動的に追加するテーブルがあります。各行の最後の列には、クリックするとその行を削除するリンクが含まれています。現在、行は正常に追加されていますが、削除ボタンにアタッチされているイベントが発生しない理由がわかりません。console.log（）でテストするために削除コードを削除しましたが、コンソールに何も表示されません。

on（）は追加されたHTMLで動作するはずですが、何が欠けていますか？

http://jsfiddle.net/52Pbk/

HTML：

 <div id="people">
            <table>
                <tr>
                    <th>First Name</th>
                    <th>Second Name</th>
                    <th>Age</th>
                </tr>
            </table>
        </div>
    <a href="#" id="add">Add</a>

JS：

var html = '<tr>';
            html += '<td><input type="text" /></td>';
            html += '<td><input type="text" /></td>';
            html += '<td><input type="text" /></td>';
            html += '<td><a href="#" class="remove_btn">x</a></td>';
        html += '</tr>';

$('.remove_btn').on('click', function() {
       console.log('REMOVE BUTTON CLICKED');            
    //$(this).parent().parent().remove();
                return false;
            });

$('#add').on('click', function() {
    $('#people').append(html);
    return false;
});
4

3 に答える 3

4

You are binding the click event handler to all current DOM elements. You need to use this syntax of .on() for event delegation for future dynamically created elements.

$("#people").on("click", ".remove_btn", function(e) {
  console.log('REMOVE BUTTON CLICKED');         
  e.preventDefault();
  return false;
});

You need to use .on() in a parent element that is not modified. I used #people in this case. But, you can also narrow it using a closer parent element.

于 2013-02-24T09:52:34.447 に答える
1

This happens when you apply event on elems which are not available in the dom. So you have to delegate the event to its closest existing parent:

$('table#people').on('click', '.remove_btn',function() {
于 2013-02-24T09:54:32.650 に答える
-2

これは単なる注文の問題です。コードを呼び出して onclick イベントを登録する前に、HTML を追加する必要があります。

$('#add').on('click', function() {
    $('#people').append(html);

    $('.remove_btn').on('click', function() {
           console.log('REMOVE BUTTON CLICKED');            
               //$(this).parent().parent().remove();
                        return false;
                });


    return false;
});
于 2013-02-24T09:52:17.647 に答える