Jquery — Click event fires twice.

I had an issue with jquery where the click event fires twice per click.

With the following code, I would get the alert fired twice.

$("div").click( function()  { alert('clicked');} ) 

I narrowed down the problem to having the DOM Ready function inside of my HTML <body></body> tag.

So.. make sure all of your jquery code is inside one document.ready() or $(function() { }); (the jquery shortcut)

I reproduced this error and having two sets of $(function() {}); was no problem inside the <head></head> tags, but as soon as it goes in the <body></body> the problem appeared.

54 thoughts on “Jquery — Click event fires twice.

  1. I just want to say thanks! It really helped me a lot, I first I did not get what you meant but I double checked and worked great for me! thank you.

    1. Thanks for the comment Hugo!

      I can barely understand this as well, I will go rewrite it.

      Having a second $(function() {} ) in the HTML Body causes the error, if I understand myself.

  2. You’reprobably right.
    But what if I need to load jquery javascript code inside the content of a tab for instance … As for some browsers you shouldn’t have more than one tags set so ?? How do you avoid putting $(function(){}) inside tha ??

    1. I had the scripts wrapped
      for example
      $(function() {
      $(‘#masks_table’).find(‘input[id^=housing_]’).click(function(){
      //blah blah bla
      });
      });
      I unwrapped them and the double trigger went away

      $(‘#masks_table’).find(‘input[id^=housing_]’).click(function(){
      //blah blah bla
      });

    2. thanks shabaz and hope this article get updated with your solution!
      I used : e.preventDefault(); but didn;t fix the problem

    3. Hey,
      You have to use return false also.

      Any way thanks for your comment.

      dialog.find(‘#invoiceService’).unbind(‘click’).bind(‘click’, function () {
      if (dialog.find(‘.RetailWithService’).length == 1) {
      alert(‘For continue this payment option you have to REMOVE Retail Item.’);
      }
      return false; //to prevent the browser actually following the links!
      });

    4. This is perfect! The first solution above by Yuji did not work in my case:

      I’ve added additional ATTLIST to the doctype which is 100% HTML-valid. But however, when viewing the html with firebug, nothing was included in the head and all and – tags were just under the body-tag.
      I had different files of javascript (JQuery) whit in each of them $(document).ready(); statement. Normally, this is absolutely correct as multiple ready()-statements are just added up, but with this error that ready() cannot be under body… this occurs to be faulty. The browser did click twice…

      Unbinding click and binding it immediately after is THE PERFECT SOLUTION in this case.

      1. My apologies for the errors:

        – apparently some words gone missing:
        *nothing was included in the head and all style and script-tags *
        *whit should be with

    5. Shahbaz Saleem: Yours is the only solution that worked for me, and I spent a whole day trying to track this down. Many, many thanks! (ps… I use on() and off() to bind and unbind, per the latest jq docs… but either way worked.

  3. Brother.. serious.. save me now.. tanks a lot shahbaz saleem.. This fucking event triggered 2 times was peacing me off.. but i steel dont know why this happend.. so i could prevent..
    but tanks ..

  4. I was facing the same problem…..then I looked in to my JSP and found the same .js file containing the jquery code included twice. So I removed one and it’s working fine.
    Thanks🙂

  5. Much simpler for this

    $(‘#button’).click(function(e) {
    e.preventDefault();

    // then do ajax stuff.
    }

    What I would say is happening the event within your function is firing and then the button event is telling it to fire again.

    1. Just for interest sake, I include multiple $(document).ready(function(){…} statements in my code, and it does not produce a problem. However, for some RANDOM reason, I had a div hierarchy, and within the 3rd (and last) hierarchy level, I called a in-between divs. This caused the on-click event of another completely non-related div to be called twice. When I removed it, the problem was resolved!

  6. Also make sure, that if you include a script via tag is not loaded twice and in the correct order. When loading a script using jQuery, so jQuery must have been loaded before.

  7. None of the mentioned solutions where working for me. I downloaded the uncompressed version en removed the line ‘$(‘input#’ + $(this).attr(‘for’)).triggerHandler(‘click’);’. For me the problem is fixed.

  8. Removing the click attribube first worked for me like this:

    $(‘#selector’).removeAttr(‘onclick’).click(function () { alert(‘clicked’); });

  9. Had this exact issue, except it only occurred on iPad. Was driving myself nuts since it worked fine on everything else, thanks for making this available!

  10. Pretty nice post. I just stumbled upon your weblog and wanted to say that I have really enjoyed browsing your blog
    posts. After all I’ll be subscribing to your rss
    feed and I hope you write again very soon!

  11. Hi i have a input type=name there i am using onclick and onkeypress events and i am passing javascrip function with some parameter. inside the function i have a confirm alert if the user press ok then do some work but the problem is the alert message appearing two times. Please help me on this

  12. I have been searching many times to solve this problems. It is lucky me found this solution. I have never get an idea that putting $ in front of function covering all jquery code will solve it. Many thanks for sharing it.

  13. There are some fascinating deadlines on this article but I don’t know if I see all of them middle to heart. There’s some validity but I’ll take maintain opinion till I look into it further. Good article , thanks and we would like extra! Added to FeedBurner as well

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s