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()。在这种情况下我使用了#people。但是，您也可以使用更近的父元素来缩小它。

Answer 2

当你在dom上没有的elems上应用事件时会发生这种情况。因此，您必须将事件委托给其最近的现有父级：

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

Answer 3

这只是一个订单问题。在调用代码注册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;
});

jQuery on（）没有触发附加标记

3 个答案: