How to remove all Click event handlers in 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?

Answer 1

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

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

Answer 2

you would use the unbind() to remove an event like so:

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

but this will remove all click events bind to this control, so if the SaveQuestion is the only one then this will do it, but if not then

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

Answer 3

If you used...

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

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