Question

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

我正在创建一个可编辑的表格单元格。在此表中，我想删除单元格上的click事件（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：这是我的示例演示：EXAMPLE CODE

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

我现在做错了什么？

Answer 1

修改

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

为了完整性，我留下了答案，因为我终于找到了完全解开事件的方法。

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

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

然而，仍会留下一个包含事件的元素   附加的，在点击时总是执行，即使它没有冒泡   起来。

下面的示例真正解除了事件的绑定，让您没有遗留，并且不需要传播被停止，因为事件完全未绑定：

$(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后，我将click事件重新绑定到元素，再次使用one()虽然现在存在元素，但使用static选择器。我还使用命名空间'click.namespace'来确保外部one()的解绑定不会消除新的绑定。

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

为了防止用户在初次点击后点击两次，我会自动触发触发初始事件的元素的点击事件（$(this).click()），使用户无缝。 / p>

您的代码应该能够使用类似下面的代码：

$("#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()仅被选中，因为您希望事件在单击元素后未绑定。

Answer 2

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

在处理程序中用此行替换.off行将执行您想要的操作：

$this.on('click', function(e) {e.stopPropagation();} );

Answer 3

您是否尝试使用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/

分配和删除点击事件

3 个答案:

DEMO - 动态绑定的单个元素