Die Verwendung von .live ('click') innerhalb einer .click() - Funktion löst sich aus

Question

Ich versuche, einen $('body').live('click') Listener hinzuzufügen, nachdem der Benutzer auf ein div geklickt hat. Der Zweck besteht darin, eine benutzerdefinierte Dropdown-Box zu erstellen, die der Benutzer öffnen und schließlich schließen kann, indem er auf eine beliebige Stelle auf der Seite klickt.

Aber wenn ich hinzufügen .live() oder .bind() Funktion innerhalb einer .click() Funktion, die live() Funktion aus irgendeinem Grund ausgelöst:

$('#myDiv').click(function(){ 
    $('#myDiv .child').show().addClass('showing'); 
    $('body').live('click', function(){ 
      $('#myDiv .child').hide(); 
      $('body').die(); 
    }) 
}) 

#myDiv gezeigt wird, aber sofort versteckt, belegt durch die anhalt .showing Klasse.

Bin ich mit live() falsch? Wie vermeide ich diese Rekursion?

Answer 1

return false Ereignispropagierung stoppen:

$('#myDiv').click(function(){ 
    $('#myDiv .child').show().addClass('showing'); 
    $('body').live('click', function(){ 
      $('#myDiv .child').hide(); 
      $('body').die(); 
    }); 
    return false; 
}) 

Answer 2

Verwenden zweite Körper klicken Bindung ohne Live (Sie auch brauchen es nicht, denn es ist immer auf der Seite) und die Verwendung Timeout:

$('#myDiv').on('click',function(){ 
    $('#myDiv .child').show().addClass('showing'); 
setTimeout(function(){ 
$('body').on('click', function(){ 
      $('#myDiv .child').hide(); 
      $('body').off('click'); 
    }); 
},0); 

}); 

Answer 3

Vielleicht sollte es funktionieren, vielleicht sollte es nicht. Aber das tut es nicht. Ich würde empfehlen, alle Event-Handler am Anfang einzurichten und nur eine globale Variable (z. B.) zu haben, die verfolgt, ob der zweite Event-Handler tatsächlich antworten sollte oder nicht.

Answer 4

Wahrscheinlich müssen Sie die Übertragung des aktuellen Ereignisses stoppen, damit es nicht bis zum Hauptteil der Nachricht gesprudelt wird, wo es von Ihrem neuen Ereignishandler angezeigt wird.

$('#myDiv').on('click',function(e){ 
    $('#myDiv .child').show().addClass('showing'); 
    e.stopPropagation(); 
    $(document.body).one('click', function() { 
      $('#myDiv .child').hide(); 
    }); 
})