jquery - 使用 jQuery 解除事件绑定(bind)

Question

我就直奔主题吧。我有一个这样的表:

<table>
    <tr id="template">
        <td>Some text</td>
        <td><a class="add">Add</a></td>
    </tr>
</table>

然后我有一些 JavaScript，如下所示:

$(document).ready(function() {
    $('a.add').click(function(event) {
        var newRow = $('#template').clone();
        newRow.removeAttr('id');
        newRow.find('td.button a').removeClass('add').addClass('remove').text('Remove');
        newRow.unbind(event).click(function()) {
            alert('Put some remove row code here');
        });
        $('#template').before(newRow);
    });
});

这一切的作用是显示一个只有一行的表格，其最后一列包含一个链接。如果单击该链接，则会创建该行的副本并插入到该行之前。在此过程中，链接元素的类从“add”切换为“remove”，并且链接的文本切换为“Remove”。

现在，重点是您应该能够通过单击底行的“添加”链接来添加新行，并通过单击“删除”链接来删除新行。

不幸的是，“删除”链接的作用仍然类似于“添加”链接，添加新行。解除绑定(bind)应该可以解决这个问题，但由于某种原因它没有。但警报仍然显示。

Answer 1

我发现的问题是 unbind() 后单击事件上的语法错误。无论解除绑定(bind)是在行上还是实际的 anchor 上，它似乎都按照您想要的方式工作。此外，您将整行的文本替换为“删除”，而不是 anchor 的文本。

$('a.add').click(function() {
    alert();
    var newRow = $('#template').clone();
    newRow.removeAttr('id');
    newRow.find('td.button a').removeClass('add').addClass('remove');
    $('a',newRow).text('Remove');
    newRow.unbind().click(function() {
        $(this).closest('tr').remove();
    });
    $('#template').before(newRow);
});