It it possible to attach a global handler two different objects, and then remove just one of them?

Question

Suppose I make a global handler for closing a popup :

  mouseup_handler: function(item, mouse_is_inside){
    if(!mouse_is_inside) {
      close_box(item);
      return false;
    };
  },

And I attach it as so :

$("body").bind('mouseup', function(){ mouseup_handler($popup, mouse_is_inside);  });

But let's say I have two objects that the body needs to be responsible for closing.

Now when I call the close of one of the objects :

 $("body").unbind('mouseup');

Both, or any mouseup handlers attached to the body are removed. I could be more specific and say :

$("body").unbind('mouseup', mouseup_handler() );

But this would still cause the same problem with all mouseup_handler()'s to be removed.

How can I allow the body to differentiate between the two ( or many ) yet write the most minimal amount of code that can be shared between the two objects for the same handler?

Pointy · Accepted Answer · 2012-06-11T14:42:53.827

1

When the event handler is invoked via jQuery, this will refer to the DOM element involved. Thus:

$('body').bind('mouseup', function() { mouseup_handler( this, mouse_is_inside ); });

(Or as appropriate; it's hard to tell because you didn't post very much code.)

edit wait - if you're binding to the <body> but you're doing it as a delegation thing, you should bind with "on" and not "bind":

$('body').on('mouseup', 'selector', function() { ... });

By doing that, you ensure that this is bound to the actual event target element and not the <body>. The "selector" should identify the actual elements that you're interested in.

To enable and disable event handler behavior, in my opinion it's much better to do something like add or remove a class name from an element, and to check that in the handler to decide whether to do anything.

edited Jun 11 '12 at 14:42

answered Jun 11 '12 at 14:34

Pointy

371,531
55
528
584

Sorry, I'll post more code with this follow up comment. But if I bound this same handler to two objects. How can I remove just one handler so that doing a mouseup on the body would still work for the other? I believe I would have to take a few steps back and brainstorm some way of namespacing these handler calls.. – Trip Jun 11 '12 at 14:39
Wow that's brilliant. Jquery 1.7+ takes the cake. Unfortunately I'm still using jQuery 1.4 on a convoluted legacy project. Huge appreciation though. You absolutely helped me solve this even though I have to write a tad bit more boiler plate to use this older version. – Trip Jun 11 '12 at 14:47
1

In older versions of jQuery, you can use the ".delegate()" function to do the same thing. – Pointy Jun 11 '12 at 14:49

score 1 · Answer 2 · edited May 23 '17 at 10:34

There was a nice in-depth answer to this previously, but I will try to clarify the specifics of your question.

For your code to specify bindings it appears you need to add a namespace to the event. That format looks like this "event.namespace". The linked example is:

$('#myimage').on('click.mynamespace', function() { /* Do stuff */ });
$('#myimage').off('click.mynamespace');

In addition, depending on your version of jQuery you might want to take a look at the benefits of on/off as shown above. My understanding is that namespacing works the same for both, but there may be subtle advantages to the on/off methodology over the bind/unbind implementation.

The previous answer is here.

All the best, Nash

It it possible to attach a global handler two different objects, and then remove just one of them?

2 Answers2