40

Does anybody know how to unbind set of event handlers, but memorize them in order to bind them again later? Any suggestions?

2
  • Do you events have a same handler function? or all different.
    – bendewey
    Feb 5, 2009 at 17:35
  • it shouldn't be the matter. Lets pretend they all are different and I don't know what are they
    – glaz666
    Feb 6, 2009 at 8:10

7 Answers 7

23

There is a events element in the data of the item. This should get your started, you can read your elements and store the handlers in an array before unbinding. Comment if you need more help. I got this idea from reading the $.fn.clone method so take a look at that as well.

$(document).ready(function() {
    $('#test').click(function(e) {
        alert('test');
        var events = $('#test').data("events");
        $('#test').unbind('click', events.click[0]);
    });
});

<a id="test">test</a>
3
  • 1
    I was also looking around the solution for this problem, and this answer works greatly. For more generality, you could access events.click via an iterator.
    – Achimnol
    Aug 20, 2009 at 13:55
  • 3
    In jQuery 1.4.2, they changed how events are stored, so this won't work: blog.jquery.com/2010/02/19/jquery-142-released . I'm not sure what you have to do instead. Apr 13, 2010 at 3:52
  • 1
    To handle post-1.4.2 bindings, see the post on namespacing events, below. Apr 5, 2011 at 20:47
8

Here is how to achieve that, provides a storeEvents and a restoreEvents methods on a selection. storeEvents takes a snapshot of the events on the moment it is called. restoreEvents restores to the last previous snapshot. Might need to twist it a little for parameterizing the unbinding while restoring, maybe you'd like to keep the bound events after the last snapshot.

(function($){

    function obj_copy(obj){
            var out = {};
        for (i in obj) {
            if (typeof obj[i] == 'object') {
                out[i] = this.copy(obj[i]);
            }
            else
                out[i] = obj[i];
        }
        return out;
    }


    $.fn.extend({

        storeEvents:function(){
            this.each(function(){
                $.data(this,'storedEvents',obj_copy($(this).data('events')));
            });
            return this;
        },

        restoreEvents:function(){
            this.each(function(){
                var events = $.data(this,'storedEvents');
                if (events){
                    $(this).unbind();
                    for (var type in events){
                        for (var handler in events[type]){
                            $.event.add(
                                this, 
                                type, 
                                events[type][handler], 
                                events[type][handler].data);
                        }
                    }
                }
            });
            return this;
        }

    });
})(jQuery);
8

Since jQuery 1.4.2+ changes how event handlers are stored, this seems relevant:

The best way I found was to use event namespacing:

var ary_handlers = [ fn_highlight, fn_onpress, fn_cleanup ];
for ( idx = 0; idx < ary_handlers.length; idx++ ){
  $('#test').bind('click.foobar',ary_handlers[idx]);
}

// and then later: 
$('#test').unbind('.foobar');  

In the above example, all foobar events unbound. Notice that if you needed finer grain control, you could namespace each click handler and correlate to your array of handlers:

var ary_handlers = [ fn_highlight, fn_onpress, fn_cleanup ];
for ( idx = 0; idx < ary_handlers.length; idx++ ){
  $('#test').bind('click.ns_' + String(idx), ary_handlers[idx]);
}

// and then later you could pick off a specific one to unbind
$('#test').unbind('.ns_2');
1

There is a jQuery plugin called Copy Events, which copies events from one object to another. This could very easily be used to "save" events from one element and bring them back later. Just one more option :)

Edit: fixed broken link

0
0

In order to unbind an event handler you need to pass the handler function into unbind(). So you already have the handler function, all you have to do is remember it.

2
  • I thought if you do not pass a specific handler function, unbind applies to all events for that object?
    – Helmut
    Aug 12, 2012 at 16:06
  • @Helmut yes unbind will unbind all handlers if you call it with no arguments. You will not be able to bind them again later unless you have kept a reference to them. You may also unbind events that you are unaware of - e.g bound by another script. It is best to call unbind with a specific handler so that you can be sure.
    – meouw
    Aug 13, 2012 at 14:08
0

You could use the event.handler parameter:

$(document).ready(function() {
    $('#test').click(function(e) {
        e.preventDefault();
        alert('test');
        $('#test').unbind('click', e.handler);
        //Do Something...
        $('#test').click();
    });
});

<a id="test">test</a>

event.handler returns the current handler that has received the event, So by omitting it you could keep the other handlers.

-3

Nick Craver appears to have the correct answer for jQuery 1.4.2+. He also includes a helpful fiddle. His solution allows you to retrieve all event handlers attached to a jQuery element and to figure out which handler they were attached to.

1
  • 6
    People who down vote should provide the reason they down vote. Helps the person learn and provides a bit of accountability...sometimes the down voter is wrong. Everybody learns.
    – traday
    Dec 9, 2014 at 22:09

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.