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, Dec 01 '10 at 14:55
possible duplicate of [jQuery: Unbind event handlers to bind them again later](http://stackoverflow.com/questions/516265/jquery-unbind-event-handlers-to-bind-them-again-later) — sje397, Dec 01 '10 at 15:01

score 4 · Accepted Answer · edited May 23 '17 at 11:55

4

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 '17 at 11:55

Community

1
1

answered Dec 01 '10 at 14:55

sje397

41,293
8
87
103

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. – user9238833 Dec 01 '10 at 14:58
@user9238833: i found a duplicate question. See link in comments. – sje397 Dec 01 '10 at 15:02
is it possible to unbind() a specific handler, in case there is more than one? – Matt Dec 01 '10 at 15:40
Yeah, namespacing. use event.yournamespacename as the event when binding. $('#element').bind('focus.namespacename',function(){ //dostuff }) – calumbrodie Dec 01 '10 at 16:44

Harmen · Answer 2 · 2010-12-01T15:00:54.240

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 01 '10 at 15:00

answered Dec 01 '10 at 14:52

Harmen

22,092
4
54
76

calumbrodie · Answer 3 · 2010-12-01T15:07:32.923

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 01 '10 at 15:07

answered Dec 01 '10 at 15:01

calumbrodie

4,722
5
35
63

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 Dec 01 '10 at 15:02
This does not replace the click event with focus, but it's worth a shot – Harmen Dec 01 '10 at 15:07
Yeah you'd need to unbind the click handler on top of the above or else you might end up firing your function twice... – calumbrodie Dec 01 '10 at 15:10
@calumbrodie: How about subsequent focuses? If I call onclick when onfocus trigger and unbind onclick, what do I call on subsequent focuses? – user9238833 Dec 01 '10 at 15:16

move event handler with jQuery

3 Answers3