使用jQuery解除绑定事件

我就直说了。我有一张这样的桌子：

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

$(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”

现在，这一点是，您应该能够通过单击最下面一行的“添加”链接来添加新行，并通过单击它们的“删除”链接来删除新行

不幸的是，“删除”链接仍然像“添加”链接一样，添加新行。解开绑应该会处理好的，但由于某种原因它没有。不过，警报仍会显示。

对于，您可以不给它任何参数，在这种情况下，所有事件处理程序都将解除绑定。您还可以为它提供一个字符串引用，该字符串引用要解除绑定的处理程序的类型（例如“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);
});

---

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

---

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

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

---

另一种方法不是解除绑定，而是使用单击处理程序，并根据单击时的状态更改其行为。假设

控件现在具有类

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

---

我相信你有语法错误

newRow.unbind（事件）。单击（函数（））{alert（'Put some remove row code here'）；}

应读作

newRow.unbind（事件）。单击（函数（）{alert（'Put some remove row code here'）；}）Doh。当你用内存编写代码而不是复制粘贴代码时，就会发生这种情况。我在这里纠正了我的问题中的语法错误和不正确的引用。谢谢，伙计！有几个人以这样或那样的方式指出了这一点，但你已经把问题解决了。我是在解开那一行，不是锚元素。