Question

I am capturing click events on the body for a lightbox effect.

Many lightboxes can open at once.

When I close one of them, I would like their respective handlers to die.

But because they are all bound to the “body”, one unbind call, unbinds them all.

$('body').bind('click', function(){ HelperPopup.mouseup_handler($el, mouse_is_inside);  });

//  .. then later ..

mouseup_handler: function($el, mouse_is_inside) {

    $el.fadeOut(100);
    $('body').unbind('click', HelperPopup.mouseup_handler($el) );
    return false;
  };          
},

Thanks!

Answer 1

You have two options: namespaced event types, and unbinding by reference to handler.

Namespaced event types:

$(selector).on('click.mynamespace', somehandler);
...
$(selector).off('click.mynamespace');

Unbinding by reference:

$(selector).on('click', somehandler);
...
$(selector).off('click', somehandler);

Obviously you need to hold a reference to the actual handler you have attached, so it is a bit less convenient with anonymous functions.

Update: Changed answer to use the recommended on/off jQuery methods.