jQuery .click keeps adding to the event, rather than replacing it

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.

Answer 2

Check out the documentation for the bind() method at http://api.jquery.com/bind/. The event binding method's such as "click()", "focus()", etc... are just shortcuts for bind(eventtype) so reading the bind() docs will give you insight into how all of the event binds work. I think the bit that pertains to your specific issue is:

"When an event reaches an element, all handlers bound to that event type for the element are fired."

Meaning if you bind the handler "function(){ alert ('Debug'); return false; }" to the click event 5 times, all 5 will execute.

As a sidenote, the preferred and more modern way to bind to an onclick handler is to completely bypass the "onclick" attribute of a link and perform all your binds on DOM load using jQuery. Here's an example that uses more modern binds and also utilizes the trigger() method to fire the #button2 click handler when #button1 is clicked (which is what I think you were trying to achieve in your example):

$(document).ready(function() {     $('#button2').click(function(){ alert ('Debug'); return false; });  // Bind alert to #button2 click     $('#button1').click(testJQueryClick);                                           // Bind testJQueryClick() to #button1 click });  function testJQueryClick(e) {     $('#button2').trigger('click'); // Trigger #button2 click handler }