JQuery ajouter et lier

Question

J'ai une liste non ordonnée avec des éléments et je veux ajouter un élément à la fin. Voici le code actuel:

La liste initiale:

<ul id="all"> 
    <li> 
    Some text <input type="button" class="remove" value="-" /> 
    </li> 
    <li> 
    Some text <input type="button" class="remove" value="-" /> 
    </li> 
</ul> 

Le code qui supprime un élément de la liste:

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

Le code qui ajoute un nouvel élément de liste:

$("#add").click(function() { 
    $("#all").append(
    "<li>" 
    + "Some text" 
    + "<input type=\"button\" class=\"remove\" value=\"-\" />" 
    + "</li>" 
); 
}); 

Le bouton pour ajouter un nouvel élément de liste:

<input type="button" id="add" value="Add" /> 

Lorsque je clique sur le bouton, une nouvelle liste est en effet ajoutée à la liste, mais cliquer sur le bouton Supprimer ne fait rien.

Comment est-ce que je fais ce travail?

---

Bonus: Change « Un texte » avec « <input type="text" /> <input type="text" /> » et vous verrez que les deux nouveaux éléments d'entrée ajoutés auront une distance différente entre eux de celles initiales. Pourquoi? (NOTE: en utilisant Firefox 3.0.5).

Answer 1

Je pense que ce que vous recherchez est l'une des nouvelles fonctionnalités de jQuery 1.3 - des événements en direct. Voir http://docs.jquery.com/Events/live.

Cela fonctionne pour moi:

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

Bonus:

J'utilise aussi FF 3.0.5, et j'ai la même quantité d'espace entre les deux zones de texte. Si vous voulez dire entre la deuxième zone de texte et le bouton, je devrais être d'accord avec eimaj et dire que l'espace est la cause.

Answer 2

#add ajoute à l'arbre de noeud (DOM) mais.remove n'a été appliquée à tous les éléments existants avec classe une fois « supprimer » (probablement onload). L'utilisation de live ajoute également le gestionnaire aux nouveaux éléments.

(Bonus: La taille/problèmes de rendu ne sont que l'espace blanc: Ajouter un espace comme celui-ci « Un texte » fonctionne pour moi dans Ff3.0.5)