0

（我在这里包含了一个 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 而导致的限制）。

4

1 回答 1

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);
} );

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

编辑 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>

我希望这可以进一步帮助您。

于 2013-10-29T20:06:00.333 回答