funciones jQuery no responden después de anexar()

Question

Estoy creando una serie de cuadros div que permiten a los usuarios agregar/eliminar elementos de cada cuadro con jQuery. Encuentro que después de agregar un nuevo elemento a un cuadro, la función de clic que he vinculado a ese elemento no responderá. Aquí es más o menos lo que se ve mi código como:

$(".add").click(function() { 
$("#targetbox").append("<span class='remove'>This element was added</span>"); 
}); 

$(".remove").click(function() { 
alert("removing"); 
$(this).remove(); 
}); 

Si rellenar previamente #targetbox con los objetos, que responden a la función de clic. Solo se agregan dinámicamente los elementos que no responden a la función.

Answer 1

Añadir el método clic directamente a su elemento recién anexado

$(".add").click(function() { 
    $("#targetbox").append("<span class='remove'>This element was added</span>") 
    .bind("click",function(e) { 
     alert("removing"); 
     $(this).remove(); 
    }); 
}); 

o utilizar el método .live() que se unirá el evento click para usted después añade los nuevos .remove elementos

$(".add").click(function() { 
    $("#targetbox").append("<span class='remove'>This element was added</span>"); 
}); 

$(".remove").live("click", function() { 
    alert("removing"); 
    $(this).remove(); 
}); 

Answer 2

Su código maneja el evento click para todos los elementos actualmente en $('.remove').
Cualquier elemento que no exista todavía no se verá afectado.

Debe llamar a los métodos .live() o .delegate, que manejarán el evento para todos los elementos que coinciden con el selector, sin importar cuándo fueron creados.

Por ejemplo:

$(".remove").live('click', function() { 
    alert("removing"); 
    $(this).remove(); 
}); 

Answer 3

es porque cuando el código se ejecuta, los elementos no se añaden todavía. Debe agregar la función de eliminación de clics para asignarla dinámicamente a su nuevo bloque después de agregarlo durante la función de agregar clic.

$(".add").click(function() { 
    $("#targetbox").append("<span class='remove'>This element was added</span>"); 
    // Add code here for .remove click function 
});