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 回答