CODEWITHSUNDEEP
eventsevent-handlingjquery
Chris Bier
Chris Bier

Reputation: 14437

jQuery off() implementation not working

What am I doing wrong here? I read the docs but I can't seem to figure out why this isn't working as intended.

    $(".img-edit-button").on("click", function () {
       if(self.elementMenuOpen === false){
           self.showImageMenu();
           self.elementMenuOpen = true;
       }else{
           self.hideImageMenu();
           self.elementMenuOpen = false;
       }
});

Then later, I use off()

$(".img-edit-button").off();

But the events seem to be doubling up even after using .off() is there something I'm missing?

Upvotes: 0

Views: 7486

Answers (5)

Erick Maynard
Erick Maynard

Reputation: 801

There are some cases where you don't want to bind an event directly to an element. Rather, you want to bind it to a parent element, like "body" for example. This is essential when you want to define your event listeners globally but the element may not exist yet:

$("body").on("mouseenter", ".hover-item", function() {
    // do the thing
}

The problem here is if you try to run .off() on .hover-item it doesn't work. Alternatively, if you try to use .off() on body, using .children() doesn't do anything either.

Instead of using .off(), I believe it's best practice to bind your events to a particular class name, and when you want to disable those events, remove the class name:

$(".the-element").removeClass(".hover-item");

Now that particular element won't have the event listener enabled anymore. However, since you technically defined the event listener on body, if you need to enable the hover effect again at some later time, you can just use addClass(".hover-item") and everything will work just fine.

Now, this really only applies in cases where you have one animation for multiple items. Hover events are a good example of this. Instead of applying different hover events to different buttons for example, you can apply the same event to all buttons. But if you just want to disable hover events for one particular button, this is the way to go.

Upvotes: 0

Jeffrey Poen
Jeffrey Poen

Reputation: 1

This fixed it for me, added the empty $(..).on(); on de document ready method.

Upvotes: 0

user3232871
user3232871

Reputation: 1

Old but just figured someone might still run across this. If you are going to call the off it not work if nothing is assigned. It won't always trigger an error but it will stop the code from executing correctly. On the page load make sure to add a blank on event. $('#selector').on(); Works for me any way.

Upvotes: 0

Justin Bicknell
Justin Bicknell

Reputation: 4798

This is straight from http://api.jquery.com/off/ "The off() method removes event handlers that were attached with .on()". So if you bind a click event after off is called, they will continue to be executed. I am guessing you are re-binding to the click event multiple times.

One solution would be to bind the event to a parent, only once, so you don't have to re-bind every time the elements in question are added/removed from the dom. I understand this may have some performance concerns, but keeping your parent class as deep in the dom as possible will help with this.

$(".someparentclass").on('click','.img-edit-button',function(){});

Or if you want to re-bind you could use the following:

$(".img-edit-button").off().on(function(){});

http://jsfiddle.net/SEndX/3/

Upvotes: 6

Guido
Guido

Reputation: 103

You can try to use some "toggle" function to show and hide a menu. The options you can find here.

Upvotes: 0

Related Questions