Question

I have the following code block:

function testJQueryClick(){
     $('#button2').click(function(){ alert ('Debug'); return false; });       
}

When I call the function once (and then click on button 2), I get the expected alert. When I call the same function a second time and then click button 2, I get two alerts, third time I get three, etc. jQuery seems to be appending the .click event each time, rather than replacing it.

I would expect that the .click handler to be replaced each time I call it. I can’t find anything in the jQuery documentation that either confirms this as the expected behaviour, or not.

Answer 1

You’ll want to first call off the get rid of the old event listener:

function testJQueryClick () {
    $('#button2').off('click').on('click', function () {
        alert ('Debug');

        return false;
    });      
}

See it in the Pen in action.