click() event is calling twice in jQuery

Question

I setup a link element and called its click event in jQuery but the click event is calling twice, please see below the code of jQuery.

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

Answer 1

Make sure and check that you have not accidentally included your script twice in your HTML page.

Answer 2

Make un unbind before the click;

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

Answer 3

It means your code included the jquery script twice. But try this:

$("#btn").unbind("click").click(function(){

//your code

});

Answer 4

I tried , e.stopImmediatePropagation(); This seems to work for me.

Answer 5

In my case I used the below script to overcome the issue

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

off() unbinds all the events bind to #id. If you want to unbind only the click event, then use off('click').

Answer 6

A rather common solution to the two click problem is putting

e.stopPropagation()

at the end of your function (assuming you use function(e) that is). This prevents the event from bubbling up which could lead to a second execution of the function.

Answer 7

Simply call .off() right before you call .on().

This will remove all event handlers:

$(element).off().on('click', function() {
// function body
});

To only remove registered 'click' event handlers:

$(element).off('click').on('click', function() {
// function body
});

Answer 8

I had the same problem, but you can try changing this code

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

to this:

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

For me, this code solved the problem. But take care not to accidentally include your script twice in your HTML page. I think that if you are doing these two things correctly, your code will work correctly. Thanks

Answer 9

Adding e.preventDefault(); at the start of my function worked for me.

Answer 10

This is definitely a bug specially while it's FireFox. I searched alot tried all the above answers and finally got it as bug by many experts over SO. So, I finally came up with this idea by declaring variable like

var called = false;
$("#ColorPalete li").click(function() {
    if(!called)
    {
             called = true;
             setTimeout(function(){ //<-----This can be an ajax request but keep in mind to set called=false when you get response or when the function has successfully executed.
                 alert('I am called');
                 called = false;
             },3000);

    }
});

In this way it first checks rather the function was previously called or not.

Answer 11

please try this

$('#ddlSupervisor').live('change', function (e) {
    if (e.handled !== true) { //this makes event to fire only once
    getEmployeesbySupervisor();
    e.handled = true;
   }
});

Answer 12

I am not sure why but I had this problem with

$(document).on("click", ".my-element", function (e) { });

When I changed it to

$(".my-element").click(function () { });

Problem was solved. But definitely something wrong in my code.

Answer 13

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 */
});

Answer 14

this snippet of code contains nothing bad. It's another part of your script as @karim told

Answer 15

In my case, it was working fine in Chrome and IE was calling the .click() twice. if that was your issue, then I fixed it by return false, after calling the .click() event

   $("#txtChat").keypress(function(event) {
        if (event.which == 13) {
            $('#btnChat').click();
            $('#txtChat').val('');
            return false;
        }
    });

Answer 16

Calling unbind solved my problem:

$("#btn").unbind("click").click(function() {
    // your code
});

Answer 17

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.

Answer 18

When I use this method on load page with jquery, I write $('#obj').off('click'); before set the click function, so the bubble not occurs. Works for me.

Answer 19

I got tricked by a selection matching multiple items so each was clicked. :first helped:

$('.someClass[data-foo="'+notAlwaysUniqueID+'"]:first').click();

Answer 20

I too had this issue on FF. My tag was however bound to an <a> tag. Though the <a> tag wasn't going anywhere it still did the double click. I swapped the <a> tag for a <span> tag instead and the double click issue disappeared.

Another alternative is to remove the href attribute completely if the link isn't going anywhere.

Answer 21

I faced this issue because my $(elem).click(function(){}); script was placed inline in a div that was set to style="display:none;".

When the css display was switched to block, the script would add the event listener a second time. I moved the script to a separate .js file and the duplicate event listener was no longer initiated.

Answer 22

My simple answer was to turn the click bind into a function and call that from the onclick of the element - worked a treat! whereas none of the above did

Answer 23

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();

Answer 24

Had the same problem. This worked for me -

$('selector').once().click(function() {});

Hope this helps someone.

Answer 25

In my case, the HTML was laid out like this:

<div class="share">
  <div class="wrapper">
    <div class="share">
    </div>
  </div>
</div>

And my jQuery was like this:

jQuery('.share').toggle();

It confused me because nothing appeared to be happening. The problem was that the inner .shares toggle would cancel out the outer .shares toggle.

Answer 26

I solved this problem by change the element type. instead of button I place input, and this problem don't occur more.

instesd of:

<button onclick="doSomthing()">click me</button>

replace with:

<input onclick="doSomthing()" value="click me">