4

我提前为我的英语道歉...

我正在创建一个可编辑表格的单元格。在此表中，我想删除单击的单元格 (td) 上的单击事件，但让其他单元格可单击。

$("#idTable").on("click", "td", function (e) {

    var oTxtbox = $('<input type="text" value="' + $(this).text() + '"/>');
    $(this).html(oTxtbox);

    // I try to remove the event 
    $(this).off(e);

    // $("#idTable").off("click", $(this) );

    // other code

});

使用该语句$(this).off(e)，我删除了所有单元格的事件，而 $("#idTable").off("click", $(this) )不是删除任何内容：所有单元格都是可点击的。

你能帮助我吗？

更新 1：这是我的示例的演示：示例代码

更新 2： 现在我对事件有另一个问题：如果用户在表外单击，我想在 td 上重新绑定/重新附加事件。这是一个完整代码的链接：NO RE-BIND EVENT

我现在做错了什么？

4

3 回答 3

6

编辑

我刚刚看到你找到了一个解决方案，亲爱的:)。

为了完整起见，我留下了答案，因为我终于找到了如何完全解除绑定事件。

您正在使用动态绑定，因此取消绑定单个元素非常复杂，因为事件总是冒泡到绑定它的静态元素。

如另一个答案所示，您可以用新的点击事件覆盖点击事件并停止传播。

但是，这仍然会给您留下一个附加了事件的元素，该事件始终在单击时执行，即使它没有冒泡。

下面的示例真正解除了事件的绑定，让您没有任何剩余，也不需要停止传播，因为事件完全解除了绑定：

$(document).one('click', 'div', function(e) {
    $(this).parent().find("div").one('click.NewClick', function() {
        $('#result').append(this.id + " was clicked<br />");
    });

    $(this).click();
});​

DEMO - 取消绑定动态绑定的单个元素

在上面的演示中，我一直使用one()来确保事件的自动解除绑定。

外部one()是逻辑所必需的，内部one()是您的要求，因为您希望单击未绑定的事件。

我click像往常一样将初始事件与动态选择器“div”绑定，使用one().

但是，我在click事件中，在单击任何 div 之后，我将单击事件重新绑定到元素，one()再次使用，这次使用static选择器，尽管元素现在存在。我还使用命名空间'click.namespace'来确保外部的解除绑定one()不会摆脱新的绑定。

现在我的所有 div 都很好地绑定了one()，这意味着它们在被点击后会自动完全解除绑定。

为了防止用户在初始单击后必须单击两次，我会自动触发$(this).click()触发初始事件的元素的单击事件 ()，从而使用户无缝。

您的代码应该能够将其与类似于以下的代码一起使用：

$("#idTable").one("click", "td", function(e) {
    $(this).parent().find("td").one('click.NewClick', function() {
        var oTxtbox = $('<input type="text" value="' + $(this).text() + '"/>');
        $(this).html(oTxtbox);

        // other code
    });

    $(this).click();
});​

请注意使用one()，而不是on()。
当然，内部绑定可以是您需要的任何内容，one()仅在您希望在单击元素后取消绑定事件时才选择它。

于 2012-08-21T19:00:12.520 回答
2

我不认为$(this)是你认为的那样。它是匹配的<td>，它不是事件被捕获的地方（它在$("#idTable")冒泡时被捕获。

用你的处理程序中的这条线替换这些.off线将做你想要的：

$this.on('click', function(e) {e.stopPropagation();} );
于 2012-08-21T20:04:33.370 回答
1

你试过用unbind吗？

$("#idTable").on("click", "td", function (e) {
  var item=$(this);

  var oTxtbox = $('<input type="text" value="' + item.text() + '"/>');
  item.html(oTxtbox);

  item.unbind("click")

});

http://api.jquery.com/unbind/

从元素中删除先前附加的事件处理程序。

编辑：当我们需要从自身中删除处理程序时，我们需要执行此方法。

所以代码应该是

$("#idTable").on("click", "td", function (e) {
  var item=$(this);

  var oTxtbox = $('<input type="text" value="' + item.text() + '"/>');
  item.html(oTxtbox);

  item.unbind(e)

});

这种情况下的处理程序必须带一个参数，这样我们才能捕获事件对象，并在第三次单击后使用它来解除处理程序的绑定。事件对象包含 .unbind() 知道要删除哪个处理程序所需的上下文。

工作样本：http: //jsfiddle.net/tRNhJ/24/

于 2012-08-21T19:00:30.847 回答