jQuery Button.click() event is triggered twice

问题

I have the following problem with this code:

<button id="delete">Remove items</button>

$("#delete").button({
     icons: {
             primary: 'ui-icon-trash'
     }
}).click(function() {
     alert("Clicked");
});

If I click this button, the alert show up two times. It's not only with this specific button but with every single button I create.

What am I doing wrong?

回答1:

Your current code works, you can try it here: http://jsfiddle.net/s4UyH/

You have something outside the example triggering another .click(), check for other handlers that are also triggering a click event on that element.

回答2:

In that case, we can do the following

$('selected').unbind('click').bind('click', function (e) {
  do_something();
});

I had the event firing two times initially, when the page get refreshed it fires four times. It was after many fruitless hours before I figured out with a google search.

I must also say that the code initially was working until I started using the JQueryUI accordion widget.

回答3:

Strange behaviour which I was experienced also. So for me "return false" did the trick.

        $( '#selector' ).on( 'click', function() {
            //code
            return false;
        });

回答4:

If you use

$( document ).ready({ })

$(function() { });

more than once, the click function will trigger as many times as it is used.

回答5:

you can try this.

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

回答6:

This can as well be triggered by having both input and label inside the element with click listener.

You click on the label, which triggers a click event and as well another click event on the input for the label. Both events bubble to your element.

See this pen of a fancy CSS-only toggle: https://codepen.io/stepanh/pen/WaYzzO

Note: This is not jQuery specific, native listener is triggered 2x as well as shown in the pen.

回答7:

I had the same problem and tried everything but it didn't worked. So I used following trick:

function do_stuff(e)
{
    if(e){ alert(e); }
}
$("#delete").click(function() {
    do_stuff("Clicked");
});

You check if that parameter isn't null than you do code. So when the function will triggered second time it will show what you want.

回答8:

$("#id").off().on("click", function() {

});

Worked for me.

$("#id").off().on("click", function() {

});

回答9:

This can be caused for following reasons:

Either you have included the script more than once in the same html file
You already added the event listener using onclick attribute on the element
If you use template inheritance like extends in django, most probably you have included the script in more than one file which are combined together by include or extend
The event is bubbled up to some parent element.
If you are using django template, you have wrongly placed a block inside another.

So, you should either find them out and remove the duplicate import. It is the best thing to do.

Another solution is to remove all click event listeners first in the script like:

$("#myId").off().on("click", function(event) {
event.stopPropagation();
});

You can skip event.stopPropagation(); if you are sure event is not bubbled.

回答10:

I've found that binding an element.click in a function that happens more than once will queue it so next time you click it, it will trigger as many times as the binding function was executed. Newcomer mistake probably on my end but I hope it helps. TL,DR: Make sure you bind all clicks on a setup function that only happens once.

回答11:

Just like what Nick is trying to say, something from outside is triggering the event twice. To solve that you should use event.stopPropagation() to prevent the parent element from bubbling.

$('button').click(function(event) {
    event.stopPropagation();
});

I hope this helps.

回答12:

in my case, i was using the change command like this way

$(document).on('change', '.select-brand', function () {...my codes...});

and then i changed the way to

$('.select-brand').on('change', function () {...my codes...});

and it solved my problem.

来源：https://stackoverflow.com/questions/3070400/jquery-button-click-event-is-triggered-twice

标签

jquery

function

button

click