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?

David Sherret · Accepted Answer · 2014-03-04 15:46:37Z

232

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 4, 2014 at 15:46

David Sherret

108k28 gold badges197 silver badges190 bronze badges

answered May 5, 2009 at 14:42

TStamper

30.4k10 gold badges69 silver badges73 bronze badges

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

4 Comments

LockTar Over a year ago

Since jQuery 1.7, you should use on and off instead of bind and unbind

John Magnolia Over a year ago

@LockTar can you suggest how this should be wrote instead?

LockTar Over a year ago

@JohnMagnolia See my changes above.

Aliti Over a year ago

.addAttr('onclick'); or .removeAttr('onclick');

Rafael · Accepted Answer · 2009-05-05 14:35:33Z

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 5, 2009 at 14:35

answered May 5, 2009 at 14:30

Rafael

18.5k5 gold badges60 silver badges67 bronze badges

1 Comment

Skylar Ittner Over a year ago

unbind() is deprecated as of jQuery 3.0, and use of off() has been encouraged since 1.7.

pb2q · Accepted Answer · 2013-04-26 21:18:36Z

11

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

edited Apr 26, 2013 at 21:18

pb2q

59.9k19 gold badges150 silver badges152 bronze badges

answered Apr 26, 2013 at 21:01

Fo Nko

63210 silver badges23 bronze badges

Comments

Jarrett Meyer · Accepted Answer · 2009-05-05 14:43:30Z

2

If you used...

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

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

answered May 5, 2009 at 14:43

Jarrett Meyer

19.6k6 gold badges61 silver badges52 bronze badges

2 Comments

KyleFarris Over a year ago

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.

Jarrett Meyer Over a year ago

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.

Rohith K P · Accepted Answer · 2016-12-21 18:23:12Z

1

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

Use jquery's off and on

answered Dec 21, 2016 at 18:23

Rohith K P

3,5831 gold badge24 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to remove all click event handlers using jQuery?

5 Answers 5

4 Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related