分配和刪除點擊事件

Question

我提前為我的英語道歉...

我正在創建一個可編輯表格的單元格。 在此表中，我想刪除單元格上的單擊事件（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上重新綁定/重新附加事件。 這是一個完整代碼的鏈接： 沒有重新綁定事件

我現在做錯了什么？

Answer 1

編輯

我剛看到你找到了解決方案，甜蜜:)。

為了完整性，我留下了答案，因為我終於找到了完全解開事件的方法。

您正在使用動態綁定，因此取消綁定單個元素非常復雜，因為事件總是冒泡到它所綁定的靜態元素。

如另一個答案所示，您可以使用新的單擊事件覆蓋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（） out-out來確保自動解除綁定事件。

外部one()是邏輯所必需的，內部one()是您的要求，因為您希望單擊未綁定的事件。

我像往常一樣用動態選擇器'div'綁定初始click事件，使用one() 。

但是，我在click事件中，在click任何div之后，我將click事件重新綁定到元素，再次使用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()被選中，因為您希望在單擊元素后未綁定事件。

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/