Zdarzenie click () wywołuje dwukrotnie w jquery

Skonfigurowałem element link i wywołałem jego zdarzenie click w jquery, ale zdarzenie click wywołuje dwukrotnie. Zobacz poniżej kod jquery.

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

Proszę doradź.

Dzięki.

Upewnij się i sprawdź, czy przypadkowo nie umieściłeś skryptu dwukrotnie na swojej stronie HTML.

Zrób unbind przed kliknięciem;

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

Oznacza to, że Twój kod dwukrotnie zawierał skrypt jquery. Ale spróbuj tego:

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

//your code

});

Próbowałem e.stopImmediatePropagation(); To wydaje się działać dla mnie.

W moim przypadku skorzystałem z poniższego skryptu, aby rozwiązać problem

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

off()usuwa powiązanie wszystkich zdarzeń #id. Jeśli chcesz usunąć powiązanie tylko clickwydarzenia, użyj off('click').

Po prostu wywołaj .off () tuż przed wywołaniem .on ().

Spowoduje to usunięcie wszystkich programów obsługi zdarzeń:

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

Aby usunąć tylko zarejestrowane moduły obsługi zdarzeń typu „kliknięcie”:

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

Dość powszechnym rozwiązaniem problemu dwóch kliknięć jest umieszczanie

e.stopPropagation()

na końcu funkcji (zakładając, function(e)że to używasz ). Zapobiega to bulgotaniu zdarzenia, które mogłoby doprowadzić do drugiego wykonania funkcji.

Miałem ten sam problem, ale możesz spróbować zmienić ten kod

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

do tego:

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

Dla mnie ten kod rozwiązał problem. Uważaj jednak, aby przypadkowo nie umieścić skryptu dwukrotnie na stronie HTML. Myślę, że jeśli wykonasz te dwie rzeczy poprawnie, twój kod będzie działał poprawnie. Dzięki

proszę spróbuj tego

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

Jest to zdecydowanie błąd, szczególnie gdy jest to FireFox. Szukałem dużo, próbowałem wszystkich powyższych odpowiedzi i w końcu otrzymałem to jako błąd przez wielu ekspertów w porównaniu z SO. W końcu wpadłem na ten pomysł, deklarując zmienną taką jak

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

    }
});

W ten sposób najpierw sprawdza, czy funkcja została wcześniej wywołana, czy nie.

Dodawanie e.preventDefault();na początku mojej funkcji działało dla mnie.

To jest starsze pytanie, ale jeśli używasz delegowania zdarzeń, to właśnie to spowodowało.

Po usunięciu .delegate-twoprzestał się wykonywać dwukrotnie. Uważam, że dzieje się tak, gdy obaj delegaci są obecni na tej samej stronie.

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

ten fragment kodu nie zawiera nic złego. To kolejna część twojego skryptu, jak powiedział @karim

W moim przypadku działało dobrze w Chrome, a IE dzwonił .click()dwukrotnie. jeśli to był twój problem, naprawiłem go, zwracając false po wywołaniu .click()zdarzenia

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

Dzwonienie unbindrozwiązało mój problem:

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

Nie wiem dlaczego, ale miałem z tym problem

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

Kiedy zmieniłem to na

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

Problem został rozwiązany. Ale na pewno coś jest nie tak w moim kodzie.

Zostałem oszukany przez wybór pasujący do wielu elementów, więc każdy został kliknięty. :firstpomógł:

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

Ja też miałem ten problem na FF. Mój tag był jednak powiązany z <a>tagiem. Chociaż <a>tag nigdzie się nie przenosił, wciąż klikał dwukrotnie. Zamiast tego zamieniłem <a>tag na <span>tag i problem z podwójnym kliknięciem zniknął.

Inną alternatywą jest całkowite usunięcie atrybutu href, jeśli link nigdzie nie idzie.

Napotkałem ten problem, ponieważ mój $(elem).click(function(){});skrypt został umieszczony w tekście w elemencie div, który był ustawiony na style="display:none;".

Gdy wyświetlanie css zostało przełączone na blok, skrypt dodawał detektor zdarzeń po raz drugi. Przeniosłem skrypt do oddzielnego pliku .js i zduplikowany detektor zdarzeń nie był już inicjowany.

Kiedy używam tej metody na ładowaniu strony za pomocą jquery, piszę $('#obj').off('click');przed ustawieniem funkcji kliknięcia, więc bąbelek się nie pojawia. Pracuje dla mnie.

Moją prostą odpowiedzią było przekształcenie powiązania kliknięcia w funkcję i wywołanie tego jednym kliknięciem elementu - zadziałało! podczas gdy żadne z powyższych nie miało

Jeśli Twoje wydarzenie dzwoni dwa, trzy lub więcej razy, może to pomóc.

Jeśli używasz czegoś takiego do wyzwalania zdarzeń…

$('.js-someclass').click();

… Następnie zwróć uwagę na liczbę .js-someclasselementów, które masz na stronie, ponieważ wywoła to zdarzenie kliknięcia dla wszystkich elementów - a nie tylko raz!

Prostym rozwiązaniem jest więc upewnienie się, że kliknięcie zostanie uruchomione tylko raz, wybierając tylko pierwszy element , np .:

$('.js-someclass:first').click();

Jasne, że w innym miejscu skryptu (-ów) zdarzenie „kliknięcie” jest ponownie przypisywane do tego samego elementu, jak sugeruje kilka innych odpowiedzi / komentarzy.

Miałem podobny problem i żeby to sprawdzić, po prostu dodałem console.logpolecenie do mojego skryptu, jak w poniższym fragmencie:

$("#link_button")
    .button()
    .click(function () {
        console.log("DEBUG: sliding toggle...");
        $("#attachmentForm").slideToggle("fast");
    });

Jeśli po kliknięciu przycisku otrzymasz coś podobnego do poniższego obrazu z konsoli programisty przeglądarki (tak jak ja), to wiesz na pewno, że click()zdarzenie zostało dwukrotnie przypisane do tego samego przycisku.

Jeśli potrzebujesz szybkiej łatki, rozwiązanie proponowane przez innych komentatorów polegające na użyciu offmetody (btw unbindjest przestarzałe od jQuery 3.0) do rozpinania zdarzenia przed (ponownym) wiązaniem działa dobrze i też je polecam:

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

Niestety to tylko tymczasowa łatka! Gdy problem uszczęśliwienia szefa zostanie rozwiązany, naprawdę powinieneś zagłębić się w kod i rozwiązać problem ze „zduplikowanym wiązaniem”.

Rzeczywiste rozwiązanie zależy oczywiście od konkretnego przypadku użycia. Na przykład w moim przypadku był problem „kontekstu”. Moja funkcja była wywoływana w wyniku wywołania Ajax zastosowanego do określonej części dokumentu: przeładowanie całego dokumentu w rzeczywistości przeładowywało zarówno kontekst "strony", jak i "element", co skutkowało dwukrotnym powiązaniem zdarzenia z elementem .

Moim rozwiązaniem tego problemu było wykorzystanie jednej funkcji jQuery , która jest taka sama jak on, z wyjątkiem tego, że zdarzenie jest automatycznie odłączane po pierwszym wywołaniu. To było idealne rozwiązanie dla mojego przypadku użycia, ale znowu może nie być rozwiązaniem dla innych przypadków użycia.

Miałem ten sam problem. To zadziałało dla mnie -

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

Mam nadzieję, że to komuś pomoże.

W moim przypadku HTML wyglądał następująco:

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

A moje jQuery wyglądało tak:

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

Zdezorientowało mnie to, ponieważ wydawało się, że nic się nie dzieje. Problem polegał na tym, że wewnętrzne .shares toggle byłoby zrezygnować z zewnętrznej .shares toggle.

Rozwiązałem ten problem, zmieniając typ elementu. zamiast przycisku umieszczam dane wejściowe i ten problem już się nie pojawia.

instesd of:

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

zamienić:

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