Question

我创建了一个简单的表+添加行按钮。进入每个新的，我创建一个删除按钮。我的问题是我无法绑定“删除”类的“click”事件。这是简化的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    $(function () {
        $('#btnAdd').bind('click', function () {
            $('#myTable').append('<tr><td>'+
                                 '</td><td>'+
                                 '<button type="button" class="remove">DEL</button>'+
                                 '</td></tr>');
        });
        $('.remove').bind('click', function () {
            $(this).parent().parent().remove();
        });
    });
</script>

这是HTML代码：

<html>
    <button class="" type="button" id="btnAdd">+</button>
<table id="myTable">
    <thead>
        <tr>
            <th>
                Something
            </th>
            <th>
                Buttons
            </th>
    </thead>
    <tbody>
    </tbody>
</table>

如果我在HTML代码中创建一行，（'。remove'）。bind 可以正常工作，但如果使用 .append 方法。

我尝试使用 .on（）而不是.bind，结果是一样的。我用 .live 替换了.bind并且它可以正常工作但不推荐使用.live。

目前，因为我需要继续，我放置了$（'。remove'）。bind（...）;在.append指令之后的指令。所以每次我插入一个新行时，我都会绑定。它可以工作，但在我看来它是一个错误的方法（因为我绑定一个类而不是一个Id）。

有人能点燃我的蜡烛吗？谢谢，

Answer 1

问题是因为您.remove。加载DOM后附加按钮，因此您需要使用委派的事件处理程序。试试这个：

$('#myTable').on('click', '.remove', function() {
    $(this).closest('tr').remove();
});

另请注意，使用on而非bind和closest代替链式parent选择器，以提高可维护性。

Answer 2

你可以在元素创建时直接对元素进行绑定，如下所示：

$(function () {
        $('#btnAdd').bind('click', function () {
            var newRow = '<tr><td>'+
                                 '</td><td>'+
                                 '<button type="button" class="remove">DEL</button>'+
                                 '</td></tr>';                    

            function handler() { alert('DEL pressed!'); }

            $('#myTable').append(function() {
                      return $(newRow).click(handler);
                })

        });
});

希望它有所帮助。

HTML + Jquery：表+添加/删除行按钮：带有绑定的pb

2 个答案: