jQuery on（）不触发附加标签

Question

我觉得这是我犯的一个令人尴尬的简单错误，但现在我看不到它。

我有一张要动态添加行的表-每行的最后一列包含一个链接，单击该链接应将其删除。 此刻，行被很好地添加了，但是我无法弄清楚为什么未将事件附加到删除按钮上。 我已经删除了删除代码以使用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;
});

Answer 1

您正在将click事件处理程序绑定到所有当前DOM元素。 您需要将.on()这种语法用于事件委托，以便将来动态创建的元素。

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

您需要在.on()的父元素中使用.on() 。 在这种情况下，我使用了#people 。 但是，您也可以使用更接近的父元素来缩小它的范围。

Answer 2

当您将事件应用于dom中不可用的元素时，就会发生这种情况。 因此，您必须将事件委托给其最接近的现有父对象：

$('table#people').on('click', '.remove_btn',function() {

Answer 3

这只是一个订单问题。 您需要在调用代码之前附加HTML，以注册onclick事件。

$('#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;
});