jQuery how to add a handler on a class but only if isn't already installed?

Question

I have a series of nodes I want to add a click handler to, the nodes will toggle an action, click once and something is set, click again and its cleared.

The problem is that the same handler is being installed more than once so a single click results in to calls to the handler.

How can I check if the handler is installed for the class and then only install if it isn't already installed?

I know there are similar posts to this already, however having read these I couldn't find one that solves my problem where I install then handler for the class.

[Edit], my code:

    //Need to detect is handler has already been installed before adding the handler below:
    $('.btnExpCol').click(function() {
    //Do something when any element with this class is clicked
    });

A lot of the comments are based around an 'id' which if you re-read my post, I am using a 'class' selector, however the issue has now been resolved and the solution works well.

[New code, which now works]:

    $('.btnExpCol').off("click").on("click", function() {
    //Do something when any element the has this class is clicked
    });

Numerous ways to approach this . Need more context. Provide a [mcve] — charlietfl, Jan 14 '17 at 15:40

codenut · Accepted Answer · 2017-01-14T15:49:09.957

1

try unbinding first and the binding it again

$("#id").unbind("click").bind("click",function(){...

prefer this (thanks to @charlietf)

$("#someid").off("click").on("click",function(){...

edited Jan 14 '17 at 15:49

answered Jan 14 '17 at 15:43

codenut

683
1
7
21

2

bind and unbind are deprecated , use `off()` and `on()` – charlietfl Jan 14 '17 at 15:44
yes i checked it is deprecated thanx @charlietfl. Then it is best to use on and off – codenut Jan 14 '17 at 15:48
I have implemented: $('.btnExpCol').off("click").on("click", function() { and this works ! Thank you all. – SPlatten Jan 14 '17 at 15:50

score 0 · Answer 2 · answered Jan 14 '17 at 15:42

0

There are a couple of approaches that might work. 1) Change the element when you install the handler (add a class) and use :not(.hashandler) when adding to ensure you don't add twice.

2) Don't do it. Instead just add one handler (ever) to the root, $(document).on('click','.myclass',function(){...});

Any "myclass" elements will run the function when clicked.

answered Jan 14 '17 at 15:42

Andiih

12,285
10
57
88

1

another simple approach is use `off()` then `on()` – charlietfl Jan 14 '17 at 15:42
The off and on technique removes and re-add the handlers - this is ok if they only exist once or twice in the DOM, but if you have a large DOM (we have a stadium seating plan where seats can be clicked) then adding and removing events in this way creates substantial overhead. In this case its better to only have one handler and you definitely don't want to take them off and on for every change - however, this is very usecase dependent. – Andiih Jan 18 '17 at 16:59
actually better to delegate them once in that case – charlietfl Jan 18 '17 at 17:19
yep - we did do solution 2 for that use case. – Andiih Jan 19 '17 at 10:59

score 0 · Answer 3 · edited May 23 '17 at 11:45

I would disable it with off and then adding it again with on.

But if you want to go for it, this should give you an starting point:

<a href="#" id="link">Link</a>

$("#link").on("click", function(e){
    alert("link clicked");
});

$.each($._data($("#link")[0], "events"),function(i, v){
    if(v[0].type === "click") {
      alert("the click handler is set, do not add new");
    }
});

https://jsfiddle.net/nygy1s9j/10/

Ideas taken from this question, tested with jquery 3.1.1

jQuery how to add a handler on a class but only if isn't already installed?

3 Answers3