detach and reattach event listeners

Question

Is there a way to detach and reattach event listeners assuming I don't know the function that was attached in the first place?

//Unknown click function
$(target).click(function(e){
    //some function
});

//code to detach click function
$(target).mousedown(function(e){
    if(/*something*/){
        //The next line does not work. What could be done instead?
        this.clickFunction = $(target).click;
        $(target).off("click");
    }
});

//code to reattach click function
$(target).mouseup(function(e){
    if(this.clickFunction){
        $(target).click(this.clickFunction);
        this.clickFunction = null;
    }
});

Did you event try something before you add a question which doesn't even have the right syntax. — rrk, Jun 17 '15 at 06:33
`$(..).onmouseup(...)` is not a valid statement. `$(..).mouseup(...)` can be used. But `$(..).on('mouseup',...)` is a much better option. See the documentation http://api.jquery.com/on/ and http://api.jquery.com/off/ to see how you can bind and unbind properly. — rrk, Jun 17 '15 at 06:48
Sorry I fixed it. That wasn't the important part of the question. That code was just to illustrate the question. — Tony Brix, Jun 17 '15 at 13:12

score 5 · Accepted Answer · edited May 23 '17 at 12:15

jQuery saves the event functions internally as:

$._data(target, "events")

Where "target" is a DOM element not a jQuery object.

https://stackoverflow.com/a/2518441/806777

So the example code would be:

//Unknown click function
$(target).click(function (e) {
    //some function
});

//code to detach click function
$(target).mousedown(function (e) {
    if (/*something*/) {
        this.clickFunctions = [];
        var click = $._data(target, "events").click;
        for(var i = 0; i < click.length; i++) {
            this.clickFunctions.push(click[i].handler);
        }
        $(target).off("click");
    }
});

//code to reattach click function
$(target).mouseup(function (e) {
    if (this.clickFunctions) {
        for (var i = 0; i < this.clickFunctions.length; i++) {
            $(target).click(this.clickFunctions[i]);
        }
        this.clickFunctions = null;
    }
});

https://jsfiddle.net/UziTech/176fzorn/

score -1 · Answer 2 · edited Aug 22 '18 at 09:47

-1

Use jquery unbind() like as below to detach,

$(target).unbind('click');
$(target).unbind('mousedown');
$(target).unbind('mouseup');

And you can reattach using bind()

$(target).bind('click',function(){
  //some code
});
 $(target).bind('mousedown',function(){
//some code
});
 $(target).bind('mouseup',function(){
 //some code
});

edited Aug 22 '18 at 09:47

zekromWex

280
1
4
17

answered Jun 17 '15 at 06:22

Shijin TR

7,516
10
55
122

I don't see how this reattaches the click function – Tony Brix Jun 17 '15 at 06:23
This is wrong. I accidentally up-voted it. `bind('onmousedown')` are you serious? Did you mean `bind('mousedown')` – rrk Jun 17 '15 at 06:57
To use this you would need to know the code to rebind it to the event. How could you rebind the function without knowing the code? – Tony Brix Jun 17 '15 at 13:21
How can you make the code into a single function without knowing the code? As in this is a plugin that is trying to detach and reattach a click event. How can the plugin find out the code for the click event? – Tony Brix Jun 17 '15 at 20:01
1

This isn't helpful though. Say I'm using a UI element from jQuery UI, and I want my event handler to fire before theirs because I might want to prevent it. I'd want to detach their event, attach mine, and then reattach theirs. I don't know their code, and shouldn't have to. – Adam Barnes Jul 29 '16 at 09:29

detach and reattach event listeners

2 Answers2