it-swarm.com.de

das Ereignis jQuery Button.click () wird zweimal ausgelöst

Ich habe das folgende Problem mit diesem Code:

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

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

Wenn ich auf diese Schaltfläche klicke, wird der Alarm zweimal angezeigt. Dies ist nicht nur bei diesem speziellen Button, sondern bei jedem einzelnen Button, den ich erstelle.

Was mache ich falsch?

66
user276289

Ihr aktueller Code funktioniert, Sie können es hier versuchen: http://jsfiddle.net/s4UyH/

Sie haben etwas außerhalb des Beispiels, das ein anderes .click() auslöst, überprüfen Sie, ob andere Handler auch ein click-Ereignis für dieses Element auslösen.

59
Nick Craver

In diesem Fall können wir Folgendes tun

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

Ich hatte das Ereignis anfangs zweimal geschossen. Wenn die Seite aktualisiert wird, wird sie viermal ausgelöst. Nach vielen fruchtlosen Stunden fand ich es mit einer Google-Suche heraus.

Ich muss auch sagen, dass der Code anfangs funktionierte, bis ich das JQueryUI-Akkordeon-Widget verwendete.

109

Seltsames Verhalten, das ich auch erlebt habe. Also für mich war "return false" der Trick.

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

Wenn du benutzt

$( document ).ready({ })

oder 

$(function() { });

mehr als einmal wird die Klickfunktion so oft ausgelöst, wie sie verwendet wird.

14
nywooz

sie können es versuchen.

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

Ich hatte das gleiche Problem und habe alles versucht, aber es hat nicht funktioniert. Also habe ich folgenden Trick benutzt:

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

Sie prüfen, ob der Parameter nicht null ist als der Code. Wenn die Funktion zum zweiten Mal ausgelöst wird, zeigt sie, was Sie wollen.

3
Vlad Isoc

Genau wie das, was Nick zu sagen versucht, löst etwas von außen das Ereignis zweimal aus. Um dies zu lösen, sollten Sie event.stopPropagation () verwenden, um das Sprudeln des übergeordneten Elements zu verhindern.

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

Ich hoffe das hilft.

Dies kann folgende Ursachen haben:

  1. Entweder haben Sie das Skript mehrmals eingeschlossen in der gleichen HTML-Datei
  2. Sie haben den Ereignis-Listener bereits mit dem Attribut onclick für das Element hinzugefügt
  3. Wenn Sie template inheritance wie extends in Django verwenden, haben Sie höchstwahrscheinlich das Skript in mehr als einer Datei enthalten die durch include oder extend miteinander kombiniert werden
  4. Das Ereignis wird gesprudelt ​​ bis zu einem übergeordneten Element.
  5. Wenn Sie die Vorlage Django verwenden, haben Sie ein block falsch in ein anderes eingefügt ​​.

Sie sollten sie also entweder herausfinden und den doppelten Import entfernen. Es ist das Beste, was zu tun ist.

Eine andere Lösung besteht darin, alle click Ereignis-Listener zuerst im Skript zu entfernen:

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

Sie können event.stopPropagation(); überspringen, wenn Sie sicher sind, dass das Ereignis nicht perlt.

1

Dies kann auch ausgelöst werden, wenn sowohl input als auch labelinside das Element mit dem Klick-Listener ist.

Sie klicken auf label, wodurch ein Klickereignis ausgelöst wird, und ebenfalls ein anderes Klickereignis auf input für die label. Beide Ereignisse sprudeln zu Ihrem Element.

Sehen Sie sich diesen Stift mit einem ausgefallenen CSS-Schalter an: https://codepen.io/stepanh/pen/WaYzzO

Hinweis: Dies ist nicht jQuery-spezifisch, der native Listener wird 2x ausgelöst und im Stift angezeigt.

1
Stepan

Ich habe festgestellt, dass das Binden eines element.click in einer Funktion, die mehr als einmal vorkommt, in die Warteschlange gestellt wird. Wenn Sie darauf klicken, wird es beim nächsten Klick so oft ausgelöst, wie die Bindungsfunktion ausgeführt wurde. Newcomer-Fehler wahrscheinlich an meinem Ende, aber ich hoffe, es hilft. TL, DR: Stellen Sie sicher, dass Sie alle Klicks an eine Setup-Funktion binden, die nur einmal ausgeführt wird.

1
igarciaoliver

in meinem Fall benutzte ich den Änderungsbefehl auf diese Weise

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

und dann änderte ich den Weg zu 

$ ('. select-brand'). on ('change', function () {... meine Codes ...});

und es hat mein Problem gelöst.

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

});

Arbeitete für mich.

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

});