Fonctions jQuery ne répondant pas après append()

Question

Je crée une série de boîtes div permettant aux utilisateurs d'ajouter/de supprimer des éléments de chaque boîte avec jQuery. Je trouve qu'après avoir ajouté un nouvel élément à une boîte, la fonction de clic que j'ai liée à cet élément ne répondra pas. Voici à peu près ce que mon code ressemble à:

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

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

Si je préremplir #targetbox avec des articles, ils répondent à la fonction de clic. Seuls les éléments ajoutés dynamiquement ne répondent pas à la fonction.

Answer 1

Ajoutez la méthode clic directement sur votre élément nouvellement joint

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

Ou utilisez la méthode .live() qui lie l'événement de clic pour vous après l'ajout de nouveaux .remove éléments

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

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

Answer 2

Votre code gère l'événement click pour tous les éléments actuellement dans $('.remove').
Les éléments qui n'existent pas encore ne sont pas affectés.

Vous devez appeler les méthodes .live() ou .delegate, qui géreront l'événement pour tous les éléments correspondant au sélecteur, peu importe quand ils ont été créés.

Par exemple:

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

Answer 3

Il est parce que lors de l'exécution du code, les éléments ne sont pas encore ajoutés. Vous devez ajouter la fonction de suppression de clic à attribuer dynamiquement à votre nouveau bloc après l'avoir ajouté lors de la fonction de clic d'ajout.

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