CODEWITHSUNDEEP
javascriptjquery
Jay Are
Jay Are

Reputation: 584

Can't remove an Event Handler bound to $(document) with .on() when not using the same $(document) binding for .off()

(I've included a jsfiddle here: http://jsfiddle.net/CunUK/)

I'm suspecting that this is the intended behaviour for the on and off methods in jQuery, but just in case there's something I'm missing, and more importantly, in case there is some sort of work around someone can suggest, I'm going to cast this issue I'm having out here:

1) For dynamic (AJAX inserted elements) purposes, I'm binding my 'on' method to the $(document).

2) Because I'm passing unique data with each button binding, I have them separated into separate bindings.

$.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);

I'd like to remove the 'click' binding on just the the selected buttons targeted in the myButtonsFunction, not all the buttons that have been bound.

Here is some HTML to give an example of how the buttons occurr relative to eachother.

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

Long story short, I'd just like to remove the event handler for one container of buttons (keeping in mind the limitations I have due to requirements 1 and 2 mentioned above).

Upvotes: 0

Views: 128

Answers (1)

Tomasz Nguyen
Tomasz Nguyen

Reputation: 2611

The problem with using delegated events, i.e. by using $(document).on("click.myButtons", "a.foo-button", ... the handler is not directly attached to an a-element. That means that it is not possible to remove a handler from one a-element and leave them on other a-elements. You either have to remove the handler from all a-elements or not.

In your case, you have to use direct handlers by linking the handler directly to an a-element. The following code is doing what you want to achieve:

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

A handler is bound directly to a button. If a button is clicked, the handler is removed from all the buttons residing in the same container as the clicked button.

EDIT

The code below reflects your intended functionality as I suppose:

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

What I did is the following: I added a data attribute to each link element. This data attribute contains the class name that will be removed from the link element, if the link is clicked. If the class is removed from the link and if the link is clicked later, the handler will not be called anymore.

EDIT 2

Maybe an even neater solution:

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

I hope this helps you further.

Upvotes: 1

Related Questions