Verwenden Sie jQuery .Toggle () mit Live oder Binde

Auf den Punkt gebracht, können Sie Live und umschalten, um Best Practices zu kodieren, aber Sie sollten es nicht tun. Sowohl JQuery .Live () als auch jQuery .Toggle () erstellen automatisch ihre eigenen Bindungsereignisse an das Element. Dies führt zu Problemen, wenn sie zusammen verwendet werden, da Sie zweimal auf die Schaltfläche klicken müssen, um den Umschalten zum Laufen zu bringen. Ein Umkreis um diese Weise besteht darin, ein Live -Ereignis (Klick) mit Inside Toggle -Ereignis zu verwenden. Sie können den Befehl .trigger (klicken) zum Ende des Funktionsaufrufs wie folgt hinzufügen:

<span>// Add sort functions on dynamic elements inserted into DOM
</span><span>$('.sort').live('click',JQUERY4U.sortClickListener);
</span>
<span>[code lang="js"]
</span><span>//function inside JQUERY4U namespace
</span><span>sortClickListener: function(){
</span>
	<span>// Find second class name
</span>	<span>var button = $(this).attr('class').split(' ');
</span>	<span>// Sort table
</span>	<span>$(this).toggle(function() {
</span>		<span>$('.item').tsort('.'+button[1],{order:'desc'});
</span>	<span>}, function() {
</span>		<span>$('.item').tsort('.'+button[1]);
</span>	<span>}).trigger('click'); /*force the button to work with 1 click*/
</span><span>},</span>

Eine andere Möglichkeit wäre, die Methode der .data -Methode zu verwenden, aber dies wäre übertrieben und eine langwierige Art, das Rätsel zu lösen.

<span>$(".reply").live('click', function () {
</span>    <span>var toggled = $(this).data('toggled');
</span>    <span>$(this).data('toggled', !toggled);
</span>    <span>if (!toggled) {
</span>        <span>x1();
</span>    <span>}
</span>    <span>else {
</span>        <span>x2();
</span>    <span>}
</span><span>});</span>

häufig gestellte Fragen (FAQs) zu JQuery Toggle

Was ist der Unterschied zwischen JQuery Toggle () und ToggleClass ()? Dies bedeutet, dass das Element, das ursprünglich angezeigt wird, versteckt und umgekehrt wird. Andererseits wird die Funktion ToggleClass () verwendet, um einen oder mehrere Klassen aus den ausgewählten Elementen hinzuzufügen oder zu entfernen. Dies bedeutet, dass, wenn die angegebene Klasse (ES) vorhanden ist, sie entfernt wird und wenn sie nicht vorhanden ist, wird sie hinzugefügt. Wenn Sie beispielsweise mehrere DIV -Elemente mit der Klasse „MyDiv“ haben, können Sie ihre Sichtbarkeit mit $ ('. MyDiv') umschalten. Die Funktion Toggle () kann zwei Parameter erfolgen: Dauer und Rückruf. Der Dauerparameter gibt die Dauer der Animation an, und der Rückrufparameter ist eine Funktion, die nach Abschluss der Funktion toggle () ausgeführt wird. Einige gängige Probleme umfassen: Die JQuery -Bibliothek ist nicht ordnungsgemäß in Ihrem Projekt enthalten, das Element, das Sie auswählen möchten, existiert nicht oder die CSS -Anzeigeeigenschaft des Elements auf "None" gesetzt. Sie können beispielsweise eine Funktion erstellen, die den Text einer Schaltfläche ändert, wenn sie mit der Funktion Toggle () geklickt wird.

Kann ich JQuery Toggle () mit schwebem Umfang verwenden? Da das Hover -Ereignis jedoch kein Standard -JavaScript -Ereignis ist, müssen Sie stattdessen die Ereignisse von Mouseenter und Mouselave verwenden. Sie können die Funktion Toggle () in der Rückruffunktion dieser Ereignisse verwenden, um ein Element anzuzeigen oder auszublenden, wenn der Mauszeiger es eingibt oder verlässt. Sie können das Kontrollkästchen ändern, um die Funktion toggle () zu rufen, wenn sich der geprüfte Status ändert. Ähnlich wie bei den Kontrollkästchen können Sie das Optionsfeld ändern, um die Funktion Toggle () zu rufen, wenn sich die ausgewählte Optionsschaltfläche ändert. Sie können den Klickereignis der Dropdown -Schaltfläche Klicken Sie verwenden, um die Funktion toggle () aufzurufen. Sie können beispielsweise ein Texteingangsfeld basierend auf der ausgewählten Option eines Dropdown -Menüs mit der Funktion "Toggle () anzeigen oder ausblenden.

Das obige ist der detaillierte Inhalt vonVerwenden Sie jQuery .Toggle () mit Live oder Binde. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!