Wie kann die jQuery-Callback-Funktion gestoppt werden?

Question

Ich habe 2 HTML-Elemente: A und B, hier ist der jQuery-Code:

$('A').click(function(){
    $('B').click(function(){
        console.log("hello");
    })
})

Wenn ich auf A klicke und dann auf B klicke, wird "hello" angezeigt, was in Ordnung ist. Aber wenn ich erneut auf A klicke und dann auf B klicke, zeigt es mir dieses Mal ZWEI "hello" an, was unerwünscht ist. Ich möchte nur ein hallo.

Ich kenne mehr oder weniger den Grund, es könnte das Ergebnis der Rückruffunktion sein: B wartet nach dem ersten Klick immer noch darauf, dass der Benutzer darauf klickt.

Meine Frage ist jetzt: Wenn ich weiterhin "Klicken auf B" innerhalb von "Klicken auf A" haben möchte ("Klicken auf B" ist eine Rückruffunktion von "Klicken auf A"), wie kann ich das Problem des doppelten Ergebnisses lösen?

Ich bin neu in der Rückruffunktion, bitte helfen Sie mir!!!

Answer 1

Ihr aktueller Code macht nicht ganz das, was Sie denken. Jedes Mal, wenn Sie A klicken, wird ein neuer Klick-Handler zu B hinzugefügt. Wenn Sie also 3 Mal auf A klicken, haben Sie 3 Klick-Handler auf B, die alle ausgeführt werden, wenn B angeklickt wird.

Ein Fix wäre, den Klick-Handler von B innerhalb des Klick-Handlers von A abzumelden, z.B:

$('A').click(function(){
    // Stellen Sie sicher, dass immer nur ein Klick-Handler auf B vorhanden ist,
    // indem Sie vorhandene Handler löschen, bevor Sie unseren neuen hinzufügen.
    $('B').unbind('click').click(function(){
        console.log("hello");
    })
})

Dieser Code hat jedoch den Nebeneffekt, alle von Bs Handlern zu entfernen, was Sie möglicherweise nicht möchten. Die robustere Version, die nur den spezifischen Handler entfernt, besteht darin, einen benannten Handler zu erstellen, anstatt einen anonymen Handler, und diesen hinzuzufügen und zu entfernen. Dies ermöglicht es Ihnen, den spezifischen Handler anzusprechen, den Sie möchten. Sie können dies auch durch Namensräume erreichen (siehe die Dokumentation für unbind und suchen Sie nach "Namensräumen").

var helloHandlerForB = function() { console.log("hello"); };

$('A').click(function(){
    // Stellen Sie sicher, dass immer nur ein Klick-Handler auf B vorhanden ist,
    // indem Sie vorhandene Handler löschen, bevor Sie unseren neuen hinzufügen.
    $('B').unbind('click', helloHandlerForB).click(helloHandlerForB);
})

Answer 2

Sie könnten auch einen Boolean erstellen, um zu überprüfen, ob auf A geklickt wurde.

Beispiel: fiddle

var aIsClicked = false; //boolean

$('#A').click(function(){
   $('#log').html('Klick auf A');
   aIsClicked = true;
});

$('#B').click(function(){
   if(aIsClicked) //überprüfen, ob auf A geklickt wurde
   {
       $('#log').html('Klick auf B und A wurde geklickt');
       alert("hallo");
   }
    else
    {
        $('#log').html('Klick auf B und A wurde nicht geklickt');
    }
});

Answer 3

Das Problem ist, dass jeder aufeinander folgende Klick auf A einen weiteren Klick-Handler zu Ihrem B hinzufügt. Jeder dieser Handler wird ausgeführt, wenn Sie auf B klicken. Wenn Sie also zehnmal auf A klicken, haben Sie zehn Klick-Handler an B gebunden :-D

Um die Probleme der anderen Lösungen, ständiges Ent- und Neu-Binden und globale Variablen, die beide unangenehm sind, zu vermeiden, verwenden Sie stattdessen diese saubere Lösung:

$('A').one("click", function(){
    $('B').click(function(){
        console.log("hallo");
    })
})

Indem Sie .one() anstelle von Klick verwenden, wird das Klick-Ereignis auf A nur einmal ausgelöst und genau ein Klick-Ereignis-Handler an Ihrem Element B gebunden.

Beispiel Fiddle