move event handler with jQuery

Question

I have an issue which is driving me crazy and as a last resort I am placing a question here.

I want to move the onclick event from an element to the onfocus event of the same element and I am using the following code:

$("#theElement").bind("focus", {}, $("#theElement").data("events").click);
$("#theElement").unbind("click");

Maybe you have guess it. IT DOES NOT WORK.

How do I make this work? I am getting a "fn.apply is not a function" message in the following piece of code from jquery 1.3.2:

proxy: function( fn, proxy ){
        proxy = proxy || function(){ return fn.apply(this, arguments); };
        // Set the guid of unique handler to the same of original handler, so it can be removed
        proxy.guid = fn.guid = fn.guid || proxy.guid || this.guid++;
        // So proxy can be declared as an argument
        return proxy;
    }

EDIT: I'm sorry, I should have mentioned. This comes from a plugin which does some stuff when clicking an element. I want to make the same thing when the element gets focus not when it is cliked so the simplest solution I thought off was this since I can't modify the code for the plugin.

EDIT: Found the problem. It is similar to what @sje397 posted in his answer, not

$('#theElement').data('events').click[0]

but

$('#theElement').data('events').click[3]

For some reason, even if only one event is registered the thing ends up as 3 (the guid in that piece of code from jquery).

It does not work because .click() is a function that will bind an event to an element. It is not the event handler itself. Now I'll check out what you could do to recall the event handler ;) — Harmen
– Harmen, Commented Dec 1, 2010 at 14:55
possible duplicate of jQuery: Unbind event handlers to bind them again later — sje397
– sje397, Commented Dec 1, 2010 at 15:01

Community · Accepted Answer · 2017-05-23 11:55:27Z

2

I would suggest naming the event handler in the first place, like

$('#theElement').click(function myHandler() {
  //...
});

Then, you can do

$("#theElement").bind("focus", {}, myHandler);
$("#theElement").unbind("click");

This should make it more readable, as well as fixing the bug.

If you can't, then you can do:

// assuming yours is the first handler
var myHandler = $('#theElement').data('events').click[0]; 

$("#theElement").bind("focus", {}, myHandler);
$("#theElement").unbind("click");

Also not that in jQuery 1.4.3+, the key was changed to __events__. See this answer.

edited May 23, 2017 at 11:55

CommunityBot

11 silver badge

answered Dec 1, 2010 at 14:55

sje397

41.9k9 gold badges90 silver badges106 bronze badges

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

4 Comments

user9238833 Over a year ago

I can't do that. This comes from a plugin which does some stuff when clicking an element. I want to make the same thing when the element gets focus not when it is cliked so the simplest solution I thought off was this. I am willing to accept any other way of doing it. Thanks for your answer.

sje397 Over a year ago

@user9238833: i found a duplicate question. See link in comments.

Matt Over a year ago

is it possible to unbind() a specific handler, in case there is more than one?

calumbrodie Over a year ago

Yeah, namespacing. use event.yournamespacename as the event when binding. $('#element').bind('focus.namespacename',function(){ //dostuff })

Harmen · Accepted Answer · 2010-12-01 15:00:54Z

1

I found out that jQuery adds the event to an element by using .data(), so you could do something like this to retrieve the event handler:

$(el).data().events.click[0].handler

This is not an elegant solution, but if you cannot change anything to the click handler itself, this would be the only solution.

edited Dec 1, 2010 at 15:00

answered Dec 1, 2010 at 14:52

Harmen

22.5k4 gold badges57 silver badges77 bronze badges

Comments

calumbrodie · Accepted Answer · 2010-12-01 15:07:32Z

1

I'm not 100% clear what it is exactly that you want to do. Do you want to bind a focus AND a click event to the same element?

$("#theElement").bind("focus click", function(){
    //do stuff
    $(this).unbind('focus click');
});

edit: given your clarification - you want to fake the 'click' event on focus...

$("#theElement").bind("focus", function(){
    $(this).trigger('click');
});

http://api.jquery.com/trigger/

edited Dec 1, 2010 at 15:07

answered Dec 1, 2010 at 15:01

calumbrodie

4,8025 gold badges39 silver badges64 bronze badges

4 Comments

Harmen Over a year ago

This is not what he wants. The OP wants to replace the click event with a focus event. By the way, you don't need the comma to seperate the events

Harmen Over a year ago

This does not replace the click event with focus, but it's worth a shot

calumbrodie Over a year ago

Yeah you'd need to unbind the click handler on top of the above or else you might end up firing your function twice...

user9238833 Over a year ago

@calumbrodie: How about subsequent focuses? If I call onclick when onfocus trigger and unbind onclick, what do I call on subsequent focuses?

Collectives™ on Stack Overflow

move event handler with jQuery

3 Answers 3

4 Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related