Get click handler from element in JQuery

Question

How can I get a reference to the click handler of an element in JQuery?

Here is what I am trying to do:

Store the click handler, Change the click handler for the next click, Restore the original click handler

var originalClick = $(settings.currentTarget).click;
$(settings.currentTarget).off("click");

$(settings.currentTarget).click(function (e) {
    e.preventDefault();
    settings.model.modal.close();

    $(settings.currentTarget).off("click");
    $(settings.currentTarget).click(originalClick);
});

The above code works the first time, however, when I click on the element again it fails:

 Uncaught TypeError: Object [object HTMLAnchorElement] has no method 'on'

Update:
I now realize that this is a really bad design that I am trying to do. I have resolved this issue by maintaining a visibility boolean in my viewmodel, if it is true, don't re-open the modal.

$(settings.currentTarget).click is the function you are binding the event handler with. It is not the event handler itself. How was the original event handler bound? With jQuery or any other way? — Felix Kling
– Felix Kling, Commented Jun 19, 2013 at 20:24
@FelixKling the original click handler was bound using knockout. — mcottingham
– mcottingham, Commented Jun 19, 2013 at 20:25
This might be able to help: stackoverflow.com/questions/2518421/… — musicnothing
– musicnothing, Commented Jun 19, 2013 at 20:26
So you used a click binding? I don't know how it works internally but I assume knockout is using addEventListener. There is no way to get a reference to handlers bound this way. — Felix Kling
– Felix Kling, Commented Jun 19, 2013 at 20:27
I think you're getting that message because you're calling $(settings.currentTarget).off("click"); again during the click and never called .On first. It looks like it was already .off as you have at the top. — Panama Jack
– Panama Jack, Commented Jun 19, 2013 at 20:28

Community · Accepted Answer · 2017-05-23 10:31:31Z

7

$(...).click is the jQuery click() method, not your event handler.

You can use an undocumented internal API to get the list of event handlers:

jQuery._data( elem, "events" );

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Jun 19, 2013 at 20:29

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

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

Comments

Panama Jack · Accepted Answer · 2013-06-19 20:48:32Z

0

What happens if you try it this way?

  var originalClick = $(settings.currentTarget).click;
    $(settings.currentTarget).off("click");

    $(settings.currentTarget).on("click",function (e) {
        e.preventDefault();
        settings.model.modal.close();

        $(settings.currentTarget).off("click");
        $(settings.currentTarget).click(originalClick);
    });

answered Jun 19, 2013 at 20:48

Panama Jack

24.6k11 gold badges65 silver badges95 bronze badges

5 Comments

mcottingham Over a year ago

Unfortunately that gives me the same thing. I think that what I need to do is get this new click handler to execute before the original one and stopPropagation, just not sure how to do that.

Panama Jack Over a year ago

I don't think you're using .Off() correctly. Why are you trying to unbind something that you haven't bound yet? From the jQuery documentation The off() method removes event handlers that were attached with .on(). The first time you call it, you never attached it with .on() first. You might be mixing things.

Panama Jack Over a year ago

Can you give more info on what you're trying to do? What is settings.currentTarget? Also I noticed you said you were using knockout.js. Any reason this part can't be done with jQuery?

Felix Kling Over a year ago

Using var originalClick = $(settings.currentTarget).click; doesn't make sense. jQuery.fn.click is a jQuery method, not an event handler. You cannot bind it as event handler.

Panama Jack Over a year ago

@FelixKling I know, that is what I told him. I think he used knockout or something to bind initially.

Guybrush · Accepted Answer · 2025-03-28 13:32:03Z

Although the question is quite old, there is another possibility that may help someone.

If you bind the function to an element but it is anonymous and it is not worth to store it in a (global) variable, then you can add this anonymous function to the element by data(), e.g.:

let addClickEvent = function(el, fn) {
    $(el).on("click", fn);
    $(el).data("_internal_click_event", fn);
};

If you later have to unbind and rebind the function from this element, you can access the stored anomyous function, e.g.:

let unbindRebind = function(el) {
    $(el).off("click");
    // Do something else where the click event is undesired
    $(el).on("click", $(el).data("_internal_click_event"));
};

If desired, you can even override the on function of jQuery.

Collectives™ on Stack Overflow

Get click handler from element in JQuery

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related