不能删除带有。对（绑定到$（文件）的事件处理程序）（）

Question

（我已经包括这里的jsfiddle：http://jsfiddle.net/CunUK/）

我怀疑这是jQuery中on和off方法的预期行为，但为了万一有些东西我错过了，更重要的是，如果有人可以建议某种工作，我会在这里演出这个问题：

1）对于动态（AJAX插入元素）的目的，我绑定我的'on'方法到$（document）。

2）因为我使用每个按钮绑定传递唯一数据，所以我将它们分离为单独的绑定。

$.fn.myButtonsFunction = function(event){ 
    // Do some stuff with event.data['foobar'], 
    // Do some other stuff 
    this.siblings("a").addBack().off("click.myButtons", myButtonsFunction); 
} 

$(document).on("click.myButtons", "a.foo-button", {foobar: uniqueValue}, myButtonsFunction); 
$(document).on("click.myButtons", "a.bar-button", {foobar: anotherUniqueValue}, myButtonsFunction); 

我想删除“点击”只是针对在myButtonsFunction的选择按钮结合上，而不是已绑定的所有按钮。

下面是一些HTML来举例说明按钮如何相对彼此发生。

<li class="container"> 
    <a href="#" class="foo-button">Foo Button</a> 
    <a href="#" class="bar-button">Bar Button</a> 
</li> 
<li class="container"> 
    <a href="#" class="foo-button">Foo Button</a> 
    <a href="#" class="bar-button">Bar Button</a> 
</li> 
<li class="container"> 
    <a href="#" class="foo-button">Foo Button</a> 
    <a href="#" class="bar-button">Bar Button</a> 
</li> 

长话短说，我只是想删除的事件处理程序的按钮（牢记因要求1和上述2我有限制）的一个容器中。

Answer 1

使用委托事件的问题，即使用$(document).on("click.myButtons", "a.foo-button", ...处理程序不直接附加到a元素。这意味着无法从一个a元素中移除一个处理程序，并将它们留在其他a元素上。您必须从所有a元素中删除处理程序。

在你的情况下，你必须通过直接将处理程序链接到a元素来使用直接处理程序。以下代码正在执行您想要实现的功能：

$(function() { 
    myButtonsFunction = function(event){ 
     // Do some stuff with event.data['foobar'], 
     console.log(event.data['foobar']); 

     // Do some other stuff 

     // Remove handlers in the same container 
     $(event.target).siblings("a").addBack().off("click.myButtons", myButtonsFunction); 

     return false; 
    } 

    $("a.foo-button").on("click.myButtons", {foobar: 123}, myButtonsFunction); 
    $("a.bar-button").on("click.myButtons", {foobar: 456}, myButtonsFunction); 
}); 

处理程序直接绑定到按钮。如果单击一个按钮，处理程序将从位于与单击按钮相同的容器中的所有按钮中移除。

编辑

下面的代码反映了你的意图的功能，我想：

$(function() { 
    myButtonsFunction = function(event){ 
     // Do some stuff with event.data['foobar'], 
     console.log(event.data['foobar']); 

     // Do some other stuff 

     $(event.target).siblings("a").addBack().each(function(i, elt) { 
      $(elt).removeClass($(elt).data('class')); 
     }); 

     return false; 
    } 

    $(document).on("click.myButtons", "a.foo-button", {foobar: 123}, myButtonsFunction); 
    $(document).on("click.myButtons", "a.bar-button", {foobar: 456}, myButtonsFunction); 
}); 

我所做的是：我添加了一个数据属性，每个链接元素。此数据属性包含将从链接元素中删除的类名，如果链接被点击。如果该类从链接中删除，并且稍后单击该链接，则该处理程序将不再被调用。

EDIT 2

也许一个更简洁的解决方案：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    myButtonsFunction = function(event){ 
     // Do some stuff with event.data['foobar'], 
     console.log(event.data['foobar']); 

     // Do some other stuff 

     $(event.target).siblings("a").addBack().removeAttr('data-delegate'); 

     return false; 
    } 

    $(document).on("click.myButtons", "a[data-delegate=foo]", {foobar: 123}, myButtonsFunction); 
    $(document).on("click.myButtons", "a[data-delegate=bar]", {foobar: 456}, myButtonsFunction); 
}); 

</script> 
<li class="container"> 
    <a href="#" class="foo-button" data-delegate="foo">Foo Button</a> 
    <a href="#" class="bar-button" data-delegate="bar">Bar Button</a> 
</li> 
<li class="container"> 
    <a href="#" class="foo-button" data-delegate="foo">Foo Button</a> 
    <a href="#" class="bar-button" data-delegate="bar">Bar Button</a> 
</li> 
<li class="container"> 
    <a href="#" class="foo-button" data-delegate="foo">Foo Button</a> 
    <a href="#" class="bar-button" data-delegate="bar">Bar Button</a> 
</li> 

我希望这进一步帮助您。