How to remove all click event handlers using jQuery?

Question

I'm having a problem. Basically, when a user clicks an 'Edit' link on a page, the following Jquery code runs:

$("#saveBtn").click(function () {
    saveQuestion(id);
});

By doing this, the onClick event of the save button calls the saveQuestion() method and passes on the ID of the question for which the 'Edit' link was clicked.

But if in the same session the user clicks edit on 2 questions, then instead of overwriting the previous click event handler, it instead causes 2 event handlers to run, one which might call saveQuestion(1) and the other might call saveQuestion(2). By doing this 1 question overwrites the other.

Is there a way to remove all previous click events that have been assigned to a button?

score 229 · Accepted Answer · edited Mar 04 '14 at 15:46

229

You would use off() to remove an event like so:

$("#saveBtn").off("click");

but this will remove all click events bound to this element. If the function with SaveQuestion is the only event bound then the above will do it. If not do the following:

$("#saveBtn").off("click").click(function() { saveQuestion(id); });

edited Mar 04 '14 at 15:46

David Sherret

101,669
28
188
178

answered May 05 '09 at 14:42

TStamper

30,098
10
66
73

33

Since jQuery 1.7, you should use on and off instead of bind and unbind – LockTar Jul 27 '12 at 15:08
@LockTar can you suggest how this should be wrote instead? – John Magnolia Nov 15 '12 at 12:40
@JohnMagnolia See my changes above. – LockTar Nov 16 '12 at 14:14
1

.addAttr('onclick'); or .removeAttr('onclick'); – Aliti Feb 09 '16 at 20:10

Rafael · Answer 2 · 2009-05-05T14:35:33.470

15

Is there a way to remove all previous click events that have been assigned to a button?

$('#saveBtn').unbind('click').click(function(){saveQuestion(id)});

edited May 05 '09 at 14:35

answered May 05 '09 at 14:30

Rafael

18,349
5
58
67

`unbind()` is deprecated as of jQuery 3.0, and use of `off()` has been encouraged since 1.7. – Skylar Ittner Sep 29 '19 at 01:45

score 10 · Answer 3 · edited Apr 26 '13 at 21:18

10

$('#saveBtn').off('click').click(function(){saveQuestion(id)});

edited Apr 26 '13 at 21:18

pb2q

58,613
19
146
147

answered Apr 26 '13 at 21:01

Fo Nko

620
10
22

score 2 · Answer 4 · answered May 05 '09 at 14:43

2

If you used...

$(function(){
    function myFunc() {
        // ... do something ...
    };
    $('#saveBtn').click(myFunc);
});

... then it will be easier to unbind later.

answered May 05 '09 at 14:43

Jarrett Meyer

19,333
6
58
52

1

How do you figure? No matter how a element's event are bound, they can always be unbound the same way... $('#saveBtn').unbind('whatever event(s)'); Now, to RE-BIND... yes, your technique may be easier in certain circumstances. – KyleFarris May 05 '09 at 17:44
1

If you unbind all click events, then it's no different. But if you only wanted to unbind one specific action, I wouldn't want to rewrite that event in two places. And as you said, if I want to rebind it later, that's again easier to do, because I don't have to write the function a third time. – Jarrett Meyer May 06 '09 at 12:53

score 0 · Answer 5 · answered Dec 21 '16 at 18:23

0

$('#saveBtn').off('click').on('click',function(){
   saveQuestion(id)
});

Use jquery's off and on

answered Dec 21 '16 at 18:23

Rohith K P

3,233
22
28

How to remove all click event handlers using jQuery?

5 Answers5

Linked