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);
    });
});

这一切都是为了显示一个包含单行的表，其最后一列包含一个链接。如果单击该链接，则会复制该行并在该行之前插入。在该过程中，link元素的类从“add”切换为“remove”，链接的文本切换为“Remove”。

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

不幸的是，“删除”链接仍然像“添加”链接一样，添加了新行。 unbind应该照顾它，但由于某种原因，它没有。但是仍会显示警报。

Answer 1

我发现的问题是unbind（）之后click事件的语法错误。它似乎按照你想要的方式工作，无论unbind是在行还是实际的锚。此外，您使用“删除”而不是锚文本替换整行的文本。

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

Answer 2

对于unbind，您可以不给它任何参数，在这种情况下，所有事件处理程序都是未绑定的。你也可以给它取消绑定处理程序类型的字符串引用（例如'click'）。最后，您可以为它提供一个变量，该变量引用您绑定到它的实际函数。假设您没有绑定任何其他点击处理程序，您可以解除绑定，如下所示：

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

如果您绑定其他点击处理程序，请尝试：

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

Answer 3

unbind应该在a标签而不是newRow。

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

Answer 4

另一种方法是使用单击处理程序，而不是取消绑定，并根据单击时的状态更改其行为。假设<a>控件现在具有类addremove：

var buildRow = function(){
  var newRow = $('#template').clone();
  newRow.removeAttr('id');
  newRow.find('td.button a')
    .removeClass('add')
    .addClass('remove')
    .addClass('addremove');
  newRow.text('Remove');
  $('#template').before(newRow);
}

$('a.addremove').click( function(e){
  e.preventDefault();
  if( $(this).hasClass('remove') ){
    code_to_remove_row_goes_here();
  } else {
    buildRow();
  }
  $(this).toggleClass('add remove');
});

使用jQuery解除绑定事件

4 个答案: