JQuery anhängen und binden

Question

Ich habe eine ungeordnete Liste mit Elementen, und ich möchte ein Element am Ende anfügen. Hier ist der aktuelle Code:

Die ursprüngliche Liste:

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

Der Code, mit dem ein Listenelement entfernt wird:

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

Der Code, der ein neues Listenelement hinzufügt:

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

Die Schaltfläche zum Hinzufügen eines neuen Listenelements:

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

Wenn ich auf die Schaltfläche klicke, wird der Liste tatsächlich eine neue Liste hinzugefügt, aber wenn ich auf die Schaltfläche "Entfernen" klicke, geschieht nichts.

Wie kann ich das schaffen?

---

Bonus: Ändern Sie "Some text" mit " <input type="text" /> <input type="text" /> "Sie werden sehen, dass die beiden neu hinzugefügten Eingabeelemente einen anderen Abstand zueinander haben als die ursprünglichen Elemente. Warum? (HINWEIS: Sie verwenden Firefox 3.0.5).

Answer 1

Ich denke, was Sie suchen, ist eine der neuen jQuery 1.3 Funktionen - Live-Events. Siehe http://docs.jquery.com/Events/live .

Das funktioniert bei mir:

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

Bonus:

Ich verwende auch FF 3.0.5, und ich habe den gleichen Abstand zwischen den beiden Textboxen. Wenn Sie zwischen dem zweiten Textfeld und der Schaltfläche meinen, dann muss ich eimaj zustimmen und sagen, dass Leerraum die Ursache ist.

Answer 2

#add fügt dem Knotenbaum (DOM) hinzu sondern .remove wurde nur einmal auf alle vorhandenen Elemente mit der Klasse "remove" angewendet (vermutlich beim Laden). Verwendung von live fügt den Handler auch für neue Elemente hinzu.

(Bonus: Die Größen-/Rendering-Probleme sind nur weißer Raum: Fügen Sie ein Leerzeichen wie dieses "Some text " funktioniert für mich in Ff3.0.5)