La segunda función .click() no funciona

Question

La primera función .click se usa para agregar un elemento (div) en un contenedor y la segunda se usa para eliminarlo del contenedor. El contenedor inicialmente no tiene elementos. La eliminación de la función haciendo clic en él no está funcionando

$(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);  
    }); 
}); 

Sin embargo, funciona si el elemento está ya allí antes de la página se carga en el contenedor. ¿Alguna razón por qué? ¿Es por la función document.ready? Soluciones?

Answer 1

Eso es porque cuando se va a añadir el controlador de clic para .class2 elementos, sólo se va a añadir el evento a elementos que tienen esa clase en ese momento específico en el tiempo; por ejemplo, ninguno.

En su lugar, necesita utilizar la delegación de eventos como tal;

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

Esto funciona ya que se une un evento para document (que siempre existe), que escucha por los clics en cualquier .class2 elementos usando delegación de eventos. Para obtener más información, lea la documentación on().

Answer 2

Al intentar agregar el código para hacer clic en .class2, aún no se ha creado, como yo lo entiendo. intento de añadir el evento click, después de haber creado el elemento .class2 así:

$(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

use delegate event handler para ambas clases (si alterna entre ambas, o si no vuelve a class1, entonces la segunda es suficiente) porque después de cambiar class los elementos se tratan como dinámicos.

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

}); 

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

}); 

Aquí #container se refiere a los padres de los clase, es posible que tenga algo más.

Answer 4

Los eventos no pueden emitirse en elementos que no están allí cuando se elabora la función. Sin embargo, se puede crear un elemento contenedor (div) alrededor de "clase 1" y "clase 2", así:

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

he usado "span" para la clase 1, porque no sé qué elemento se trata. Entonces, en lugar del evento clic, usted podría utilizar "en()":

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

esta manera, incluso si class1 no está allí (el mismo se puede hacer para clase 2), el evento click se ejecutará