jQuery.bind unbind，倍数类的实例

Question

我有多个具有相同类“可点击”的元素，我将所有这些类绑定到：

 $('.clickable').bind('click', function()
     { 
       $(this.id).html('clicked');

     }

我假设绑定将每个元素与“clickable”类单独绑定。 然后在这个bind-function中，我想解除当前单击的元素：

 $(this.id).unbind('click');

因此，如果再次在此元素中单击，则不会再次触发单击功能。 然后，在元素内做完之后（用这些元素替换带有当前文本的文本，当你点击它之外它会改变它的html）我想再次重新点击，但是我似乎没有解除对此的点击.id ...

澄清的一些小提琴： http://jsfiddle.net/TrySpace/QZMP6/7/

Answer 1

可能是因为您的选择器错误（因为当您真正想要$("my_id")时），您的选择器会转换为类似$("#my_id")的选择器。在这种情况下，您可以这样做：

$(this).unbind('click');

这最终要比为元素再次查询DOM更好。

从pQuery 1.7开始，不推荐使用

旁注：bind和unbind。更新的方式是使用on和off：

$(".clickable").on("click", function () {
    /* ... */
    $(this).off("click");
});

编辑（以下评论）：

如果您想要阻止父事件处理程序也被通知，您可以绑定一个阻止事件传播的新处理程序：

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

Answer 2

您可能需要考虑基于jQuery的基于选择器的事件委派，并在单击时删除'clickable'类...

$('body').on('click', '.clickable', function() { 
    $(this).html('clicked')
           .removeClass('clickable');
});

或者在pre-jQuery 1.7中，但是发布1.4左右......

$('body').delegate('.clickable', 'click', function() { 
    $(this).html('clicked')
           .removeClass('clickable');
});

在这两种情况下，我都将委托处理程序放在'body'上，但最好将它放在更本地的元素上，只要它包含所有.clickable元素。