click() event is calling twice in jQuery

This is an older question, but if you are using event delegation this is what caused it for me.

After removing .delegate-two it stopped executing twice. I believe this happens if both delegates are present on the same page.

$('.delegate-one, .delegate-two').on('click', '.button', function() {
    /* CODE */
});

Sure thing somewhere else in your script(s) the "click" event is being bound again to the same element, as several other answers / comments are suggesting.

I had a similar problem and in order to verify that, I simply added a console.log command to my script, like in the following snippet:

$("#link_button")
    .button()
    .click(function () {
        console.log("DEBUG: sliding toggle...");
        $("#attachmentForm").slideToggle("fast");
    });

If, upon clicking the button, you get something similar to the image below from your browser's developer console (as I did), then you know for sure that the click() event has been bound twice to the same button.

If you need a quick patch, the solution proposed by other commentators of using the off method (btw unbind is deprecated since jQuery 3.0) to unbind the event before (re)binding it works well, and I recommend it too:

$("#link_button")
    .button()
    .off("click")
    .click(function () {
        $("#attachmentForm").slideToggle("fast");
    });

Unfortunately, this is only a temporary patch! Once the problem of making you boss happy is resolved, you should really dig into your code a little more and fix the "duplicated binding" problem.

The actual solution depends of course on your specific use case. In my case, for example, there was a problem of "context". My function was being invoked as the result of an Ajax call applied to a specific part of the document: reloading the whole document was actually reloading both the "page" and the "element" contexts, resulting in the event being bound to the element twice.

My solution to this problem was to leverage the jQuery one function, which is the same as on with the exception that the event is automatically unbound after its first invocation. That was ideal for my use case but again, it might not be the solution for other use cases.

If your event is calling twice or three times, or more, this might help.

If you are using something like this to trigger events…

$('.js-someclass').click();

…then pay attention to the number of .js-someclass elements you have on the page, because it'll trigger the click event for all elements – and not just once!

A simple fix then is to make sure you trigger the click just once, by selecting just the first element, e.g.:

$('.js-someclass:first').click();