The click () event fires twice in jquery

Question

I set the link element and fire its click event in jquery, but the click event fires twice, see the jquery code below.

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

Please inform.

Thank.

Answer 1

Make sure you don't accidentally include your script in your HTML page twice.

Answer 2

Cancel unlock before clicking;

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

Answer 3

This means that your code has included the jquery script twice. But try the following:

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

Answer 4

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

Answer 5

In my case, I used below script to solve the problem

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

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

Answer 6

Just call .off () right before calling .on ().

This will remove all event handlers:

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

To remove only registered 'click' event handlers:

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

Answer 7

Rather, a general solution to a two-click problem:

 e.stopPropagation() 

at the end of your function (if you use function(e) ). This prevents a bubble event that could lead to a second execution of the function.

Answer 8

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

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

:

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

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

Answer 9

try it

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

Answer 10

This is definitely a bug, especially on FireFox. I searched alot, tried all of the above answers and finally got this as a mistake of many experts on SO. So, I finally came up with this idea by declaring a 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); } }); 

Thus, it first checks, rather, the function was called earlier or not.

Answer 11

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

Answer 12

This is an old question, but if you use event delegation, this is what caused it to me.

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

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

Answer 13

this piece of code does not contain anything bad. This is another part of your script, as @karim said

Answer 14

In my case, it worked fine in Chrome, and IE called .click() twice. if that was your problem, then I fixed it by returning false after the .click() event was .click()

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

Answer 15

The unbind call solved my problem:

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

Answer 16

When I use this method on the download page with jquery, I write $('#obj').off('click'); before setting the click function, so the bubble does not occur. It works for me.

Answer 17

I was tricked by a selection corresponding to several elements, so each clicked. :first helped:

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

Answer 18

I also had this problem in FF. However, my tag is attached to the <a> tag. Although the <a> tag will not go anywhere, it still double-clicks. Instead, I replaced the <a> tag with the <span> , and the double-click problem disappeared.

Another alternative is to completely remove the href attribute if the link goes nowhere.

Answer 19

I ran into this problem because my $(elem).click(function(){}); the script was embedded in a div for which style="display:none;" .

When the css display has been switched to a block, the script will add an event listener a second time. I moved the script to a separate .js file and the duplicate event listener was no longer running.

Answer 20

My simple answer was to turn the click binding into a function and call it from the onclick element - processed the pleasure! while none of the above did

Answer 21

I'm 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 () { }); 

The problem is resolved. But there is definitely something wrong with my code.

Answer 22

I solved this problem by changing the type of the item. I put an input instead of a button, and this problem no longer occurs.

instesd of:

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

replaced by:

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

Answer 23

There was the same problem. It worked for me -

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

Hope this helps someone.

Answer 24

In my case, the HTML was laid out as follows:

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

And my jQuery was like this:

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

It embarrassed me because nothing happened. The problem was that the internal .share toggle would override the external .share toggle .