Ich möchte eine Liste mit Gruppeneingaben erstellen, die es dem Benutzer ermöglicht, Gruppenzeilen dynamisch hinzuzufügen / zu entfernen:

<div id="div-form-denominations" class="form-denominations">
    <div id="row-0" class="form-denomination">
        <div class="form-field">
        <div class="form-field">
        <div class="form-field">
        <input id="_denominations[0].id.reference" class="removableHiddenOrder" type="hidden" name="denominations[0].id.reference" value="87-070329-034COP-4444">
        <input id="_denominations[0].denomination" class="removableHiddenDenom" type="hidden" name="denominations[0].denomination" value="10000">
        <a id="deleteBtn-[0]" class="action-link delete-denomination" href="#">
        <div class="spacer"></div>
    </div>
    <div id="row-1" class="form-denomination">
        <div class="form-field">
        <div class="form-field">
        <div class="form-field">
        <input id="_denominations[1].id.reference" class="removableHiddenOrder" type="hidden" name="denominations[1].id.reference" value="87-070329-034COP-4444">
        <input id="_denominations[1].denomination" class="removableHiddenDenom" type="hidden" name="denominations[1].denomination" value="">
        <a id="deleteBtn-[1]" class="action-link delete-denomination" href="#">
        <div class="spacer"></div>
    </div>
    <div id="row-2" class="form-denomination">
        <div class="form-field">
        <div class="form-field">
        <div class="form-field">
        <input id="_denominations[2].id.reference" class="removableHiddenOrder" type="hidden" name="denominations[2].id.reference" value="">
        <input id="_denominations[2].denomination" class="removableHiddenDenom" type="hidden" name="denominations[2].denomination" value="">
        <a id="deleteBtn-[2]" class="action-link delete-denomination" href="#">
    <div class="spacer"></div>
    </div>
    <div id="row-3" class="form-denomination">
        .......
    </div>

Jede Zeile enthält also eine Gruppe von Formularfeldern, die eine Eingabe- oder Auswahlkomponente (im obigen Code nicht dargestellt) sowie einige ausgeblendete Felder und einen Link zum Löschen enthalten, um die aktuelle Zeile aus der Ansicht zu entfernen.

Außerdem erstelle ich einen Link, um dynamisch eine neue Zeile in den Abschnitt einzufügen

var rowTemplate = null;
j(document).ready(function() {
    // Save the row template
    rowTemplate = j('.form-denomination:first-child').clone();

    j("#add_link").click(function() {
            add_denomination();
    });
});

und hier ist der Inhalt vonadd_denomination Funktion, die die erste Zeile klont und eine geklonte ID durch einen neuen Index ersetzt und die geklonte Zeile nach der letzten Zeile der Liste anfügt.

function add_denomination() {
    var index = j('.form-denomination').length; 
    // set the new row id
    var newRowId = 'row-' + index;
    var newRow = rowTemplate.clone().attr('id', newRowId);

    // Replace the id/name attribute of each input control
    newRow.find('div, input, select, a').each(function() {
        replaceAttribute(j(this), 'id', index);
        replaceAttribute(j(this), 'name', index);
        j(this).val('');
    });

    // add new element to the DOM
    newRow.appendTo('.form-denominations');
    alert("new list size = " + j(".delete-denomination").length);
    console.log("DONE!");
}

jedes Mal klicken Sie auf dieadd-link Der Popup-Alarm zeigt die neue Listengröße (j (". delete-denomination"). Längeninkrement um 1) an, die meines Wissens erfolgreich an eine neue Zeile angehängt wurde.

Das Problem ist die folgende Methode

// delete denomination row
j('.delete-denomination').click(function () {
    j(this).parent().remove();
}

FUNKTIONIERT NUR FÜR DIE NICHT-KLONIERTE REIHE !!! Unter Verwendung von Firebug kann ich deutlich sehen, dass die angehängte Zeile mit derselben Struktur und demselben Element wie die ursprünglichen Zeilen erfolgreich angehängt wurde, aber der einzige Unterschied ist die ID.

Allerdings bei jedem Klick aufdeleteBtn-[i], in dem ich der bincloned/appended Zeilenindex, der Code geht auch nicht in diej('.delete-denomination').click() Funktion, die meines Erachtens von Dom oder jquery die neuen Zeilen nicht erkannt hat, weshalb der Link von jQuery nicht identifiziert werden konnte. Es ist eine Art Widerspruch zu der vorherigen Warnmeldung, dass der Umfang der Liste zugenommen hat.

Aber wenn ich auf klickedeleteBtn-[i] Wo ich binnon-cloned Reihe, alles funktioniert gut ...

Die Frage ist also: Wie können neue Doms angehängt / hinzugefügt und durch jQuery oder Dom identifiziert werden? Was ist bei der obigen Verarbeitung falsch? Gibt es eine Möglichkeit, die Liste zu aktualisieren, damit Dom / jQuery die angehängten Zeilen aus allen Perspektiven versteht?