Cannot unbind jQuery custom event handler

Question

I have a chunk of markup in my page that represents a view, and a JS controller function which is associated with that view. (These are Angular, but I don't believe that matters.) The controller code listens for a custom event fired from elsewhere in the app, and handles that event with some controller-specific logic.

My problem is that the controller's event handler is getting attached too many times: it gets attached every time the view is re-activated, resulting in the handler being run multiple times every time the custom event is fired. I only want the handler to run once per event.

I've tried using .off() to unbind the handler before binding it; I've tried .one() to ensure that the handler is only run once; and I've tried $.proxy() after reading about its interaction with .off() here.

Here's a sketch of my code:

// the code inside this controller is re-run every time its associated view is activated
function MyViewController() { 

    /* SNIP (lots of other controller code) */

    function myCustomEventHandler() {
        console.log('myCustomEventHandler has run');
        // the code inside this handler requires the controller's scope
    }

    // Three variants of the same misbehaving event attachment logic follow: 

    // first attempt
    $('body').off('myCustomEvent', myCustomEventHandler);
    $('body').on('myCustomEvent', myCustomEventHandler);
    // second attempt
    $('body').one('myCustomEvent', myCustomEventHandler);
    // third attempt
    $('body').off('myCustomEvent', $.proxy(myCustomEventHandler, this));
    $('body').on('myCustomEvent', $.proxy(myCustomEventHandler, this));
    // all of these result in too many event attachments

};

// ...meanwhile, elsewhere in the app, this function is run after a certain user action
function MyEventSender() {
    $('body').trigger('myCustomEvent');
    console.log('myCustomEvent has been triggered');
};

After clicking around in my app and switching to the troublesome view five times, then doing the action which runs MyEventSender, my console will look like this:

myCustomEvent has been triggered
myCustomEventHandler has run
myCustomEventHandler has run
myCustomEventHandler has run
myCustomEventHandler has run
myCustomEventHandler has run

How can I get it to look like this:

myCustomEvent has been triggered
myCustomEventHandler has run

???

Can you just make your controller not do anything if it's not visible? Doesn't fix your bug, but it's a different way to approach the problem — Ruan Mendes
– Ruan Mendes, Commented May 10, 2013 at 17:31
As far as I know, the Angular event cycle and jQuery event cycle are completely unrelated (except for the fact that they both hook into the DOM). You should attach your event to the <body> tag outside of your controller, in a $(function() { ... }) call. — rossipedia
– rossipedia, Commented May 10, 2013 at 17:33
@KevinB Did you switch to the troublesome view a few times? Actually I just tried, stil just one... — Ruan Mendes
– Ruan Mendes, Commented May 10, 2013 at 17:37
I clicked run several times, it always gives one run and one triggered — user400654
– user400654, Commented May 10, 2013 at 17:38

user400654 · Accepted Answer · 2013-05-10 17:47:58Z

3

Give your events a namespace, then simply remove all events with said namespace when you re-run the controller.

jsbin

$('body').off('.controller');
$('body').on('myCustomEvent.controller', myCustomEventHandler);

answered May 10, 2013 at 17:47

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ruan Mendes Over a year ago

This can be easier then figuring out which proxied handlers to unregister

Ruan Mendes Over a year ago

See my answer for an explanation of why the OP's code wasn't unregistering

tuff Over a year ago

This doesn't work: jsbin.com/adecul/17/edit :( I still see "myCustomEventHandler has run" x7

user400654 Over a year ago

get rid of the handler when unbinding. jsbin.com/adecul/18/edit If you want to pass the handler, you'll ahve to have one line for each event binding that you do which doesn't seem very maintainable to me.

tuff Over a year ago

OK, it works after removing the handler, and I agree with your point. Thanks for the answer!

|

Mathew Berg · Accepted Answer · 2013-05-10 18:31:23Z

2

You could listen in on the scope destroy event in your Main controller

function MyViewController($scope) { 
    function myCustomEventHandler() {
        console.log('myCustomEventHandler has run');
        // the code inside this handler requires the controller's scope
    }

    $('body').on('myCustomEvent', myCustomEventHandler);    

    $scope.$on("$destroy", function(){
        $('body').off('myCustomEvent', myCustomEventHandler);   
        //scope destroyed, no longer in ng view
    });
}

edit This is an angularJS solution. The ngview is constantly being loaded as you move from page to page. It will attach the event over and over again as the function is repeatedly called. What you want to do is unbind/remove the event when someone leaves the view. You can do this by hooking into a scopes $destroy (with the dollar sign) event. You can read up more on that here: $destroy docs

edited May 10, 2013 at 18:31

answered May 10, 2013 at 18:25

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

3 Comments

tuff Over a year ago

I love this answer, and now I'm sorry my question referred so specifically to jQuery. My curiosity about why jQuery wasn't working as expected didn't exactly align with the problem I needed to solve, but this answer solves my problem very well.

Ruan Mendes Over a year ago

This is nice, I suggested this in my answer, but I didn't know enough about angular to know about the $destroy event. No way to create collisions (as you could with event namespaces)

Mathew Berg Over a year ago

@tuff As much as I don't want to come off as elitist (sorry if I am), I would suggest my answer over the one you chose. The reason being that if you use the top one and someone goes to the view and then leaves you will have this event handler still bound somewhere. Even if they never go to the view again. In my answer though it will be removed permanently.

Community · Accepted Answer · 2017-05-23 12:22:50Z

2

The problem is that when function MyViewController(){} is called multiple times, you get a separate instance of myCustomEventHandler (attached to the current closure), so passing that to $.off doesn't unregister the previous handler.

KevinB's answer, event namespaces, is what I suggest for removing specific handlers without requiring knowledge of which handler was installed. It'd be nicer if you could unregister the events when the element is removed/hidden, then you would have the reference to the function you want to unregister, without risking removing handlers that other code may have added to the same event namespace. After all, event namespace is just a global pool of string and is susceptible to name collision.

If you make your function global, it will also work (except that it looks like you need the closure), but I'm just showing it to explain the problem, use namespaces

function myCustomEventHandler() {
    console.log('myCustomEventHandler has run');
    // the code inside this handler requires the controller's scope
}

function MyViewController() { 

    // first attempt
    $('body').off('myCustomEvent', myCustomEventHandler);
    $('body').on('myCustomEvent', myCustomEventHandler);
    // second attempt
    $('body').one('myCustomEvent', myCustomEventHandler);
    // third attempt
    $('body').off('myCustomEvent', $.proxy(myCustomEventHandler, this));
    $('body').on('myCustomEvent', $.proxy(myCustomEventHandler, this));

}

// ...meanwhile, elsewhere in the app, this function is run after a certain user action
function MyEventSender() {
    $('body').trigger('myCustomEvent');
    console.log('myCustomEvent has been triggered');
}
MyViewController();
MyViewController();
MyEventSender();

Previous Idea

~~One of the problems is that you're not passing the same function to $.on and $.off, so off is not unregistering anything in this case~~

Not the problem, leaving the answer up for reference since it's not exactly intuitive. $.proxy seems to return a reference to the same bound function if passed the same function and context. http://jsbin.com/adecul/9/edit

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered May 10, 2013 at 17:35

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

4 Comments

user400654 Over a year ago

That's what i expected(i expected to see it executed 3 times) but instead i'm only seeing it once, see jsbin in my other comment. The fact that he's even getting more than three suggests something else is going on outside of what is being shown.

Ruan Mendes Over a year ago

@KevinB I ran your jsbin but I'm not sure that the view is being reloaded in that case. I called MyEventSender(); 3 times but couldn't reproduce the problem.

user400654 Over a year ago

Yeah, nothing i do with the given code results in what the OP is seeing.

user400654 Over a year ago

here it is: jsbin.com/adecul/1 when you run the controller multiple times, it isn't cleaning up the old events.

Collectives™ on Stack Overflow

Cannot unbind jQuery custom event handler

3 Answers 3

7 Comments

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related