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.
Yuji Tomita 
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.
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.
Really very helpful. Thanks a lot !!!!
Just wanted to say thanks!
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 ??
Sorry no tags allowed. I meant more than one Head tags set; and inside the Body tags ?? Thanks
i had the same issue, and i solved it by unbinding the event first e.g. $(‘select’).unbind(‘click’).bind(‘click’,handler);
want to thank you shahbaz saleem….. really solved my problem.
Ata ul Mustafa
Thankyou thankyou thankyou !!!!
I searched everywhere for a solution and yours is the only one that worked for me.
Thanx! really helped me
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
});
thanks shabaz and hope this article get updated with your solution!
I used : e.preventDefault(); but didn;t fix the problem
Thanks man, It worked for me.
Regards.
Thank you sooooo much…..resolved my problem
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!
});
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.
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
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.
❤ shahbaz!
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 ..
Thanks. This solved my issue too.
Didn’t realise having the code inside the body tag made any difference!!
Saved me a bunch of time. Thanks!
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 🙂
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.
nbennett78 what a simple solution. You total complete and utter Ledge!
dude, you saved my day…
the question here is, why happen this?
Thank you so much~~~!!!!! You totally solve my issue!!! >//////<!!!!
ddd
Did anyone think of the obvious issue? The js is loading twice.
Thanks a bunch! You saved me ❤
It appears this happened to me because I included my JavaScript file twice, which defines the .click() event handler twice.
Same happens by using jpt.scroll.js. Just kill the clickEvent.initMouseEvent or use ontouchstart
Pointed me in the right direction. Thanks!
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!
<div style=”clear:both”></div> is the “missing” command mentioned on top
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.
Cheers this saved a LOT of messing about.
Thanks, but I’m using .on() method inside modal, so I think that’s why it didn’t work.
Using .on() on parent element and passing selector as second argument worked for me.
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.
Really helpful
Removing the click attribube first worked for me like this:
$(‘#selector’).removeAttr(‘onclick’).click(function () { alert(‘clicked’); });
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!
thanks, it worked for me aswell
the problem is the alert, avoid using alerts! 🙂
Hah, alerts are for demo purposes. I doubt anybody uses those for real
Thanks a lot!
BTW e.preventDefault(); didn’t help.
I should have known. Your simple post probably saved me an hour. Thanks.
call all javascript functions inside
javascript functions
i will work
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!
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
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.
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
Hey man, thanks a lot ! You save my day! works for me too!
Love it!