Die zweite .click() - Funktion funktioniert nicht

Question

Die erste .click-Funktion wird verwendet, um ein Element (div) in einen Container einzufügen, und der zweite wird verwendet, um es aus dem Container zu entfernen. Der Container hat zunächst keine Elemente. Das Entfernen der Funktion durch Anklicken nicht funktioniert

$(document).ready(function(){ 
    $(".class1").click(function(){ 
     //Code for adding element to the container and 
     // removing class1 from it and adding class2 

    }); 

    $(".class2").click(function(){ 
     alert("hi"); //Even the alert is not displayed 
     $(this).fadeOut(100);  
    }); 
}); 

Allerdings funktioniert es, wenn das Element bereits vorhanden ist, bevor die Seite geladen wird in den Behälter. Gründe warum? Liegt es an der document.ready-Funktion? Lösungen?

Answer 1

das, weil ist, wenn Sie die Click-Handler für .class2 Elemente sind das Hinzufügen, sind Sie nur das Ereignis Hinzufügen von Elementen, die diese Klasse haben zu diesem bestimmten Zeitpunkt; z. B. keine.

Stattdessen müssen Sie Event Delegation wie folgt verwenden;

$(document).on('click', '.class2', function() { 
    alert('hi'); 
    $(this).fadeOut(100); 
}); 

Dies funktioniert, da es ein Ereignis document (die immer vorhanden ist) bindet, die für Klicks auf allen .class2 Elementen Ereignis Delegation hört. Weitere Informationen finden Sie in der Dokumentation on().

Answer 2

Während Sie versuchen, den Code zum Klicken .class2 hinzuzufügen, ist es noch nicht erstellt, wie ich verstehe. Versuchen Sie, das Click-Ereignis, nachdem Sie das .class2 Element wie folgt erstellt:

$(document).ready(function(){ 
    $(".class1").click(function(){ 
      //Code for adding element to the container and removing class1 from it and adding class2 

     $(".class2").click(function(){ 
      alert("hi");   //Even the alert is not displayed 
      $(this).fadeOut(100); 

     }); 
    }); 
}); 

Answer 3

Verwenden Sie Delegate-Ereignishandler für beide Klassen (wenn Sie zwischen beiden wechseln, oder wenn Sie nicht zurück zu class1 dann zweite ist genug), weil nach der Änderung class Elemente als dynamisch behandelt werden.

$("#container").on("click", ".class1", function(){ 

}); 

$("#container").on("click", ".class2", function(){ 

}); 

Hier #container bezieht sich auf die Eltern jener Klasse, können Sie etwas anderes haben.

Answer 4

Die Ereignisse können nicht auf Elemente angewendet werden, die nicht vorhanden sind, wenn die Funktion ausgearbeitet wird. Aber könnten Sie ein Wrapper-Element (div) um „Class1“ und „Klasse 2“, wie diese zu erstellen:

<div id="class1_wrapper"> 
    <span class="class1"> 
</div> 

Ich benutzte „span“ für class1, weil ich weiß nicht, welches Element es sich handelt. Dann wird anstelle des Click-Ereignis, könnten Sie „on()“ verwenden:

$("#class1_wrapper").on("click", ".class1", function() 
{ 
    //Code for adding element to the container and removing class1 from it and adding class2 
}); 

auf diese Weise, auch wenn class1 nicht da ist (das gleiche gilt für Klasse 2 durchgeführt werden kann), wird das Click-Ereignis

laufen