Question

我想创建一个组输入列表，允许用户动态地让用户添加/删除组行：

<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>

因此每一行都包含一组表单字段，其中包含一个输入或选择组件（未在上面的代码中显示）和一些隐藏字段以及一个删除链接以从视图中删除当前行。

另外，我创建了一个动态添加新行的链接

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();
    });
});

以下是add_denomination函数的内容，它克隆第一行并用新索引替换任何克隆的id，并在列表的最后一行之后附加克隆的行。

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!");
}

每次点击add-link弹出警报显示新列表大小（j（“。delete-denomination”）。长度增加1），在我的理解中，新行成功附加。< / p>

问题是以下方法

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

仅适用于非克隆行!!! 使用firebug我可以清楚地看到附加的行成功地附加了与原始行相同的结构和相同的元素，但唯一的区别是id。 / p>

但是，每当我点击deleteBtn-[i]，其中i是cloned/appended行的索引时，代码甚至不会进入j('.delete-denomination').click()函数，这在我的理解中，Dom或jquery无法识别新行，因此无法通过jQuery识别链接。它与先前的警告信息相矛盾，它告诉列表的大小已经增长。

但是当我点击deleteBtn-[i]我non-cloned行时，一切正常......

所以问题是：如何追加/添加新的doms并通过jQuery或Dom识别它们？上面的处理有什么问题？有没有办法刷新列表，以便Dom / jQuery从所有角度理解附加的行？

Answer 1

jQuery 1.7 +

j(".form-denomination").on("click", ".delete-denomination", function(){
    j(this).parent().remove(); 
});

jQuery 1.3 +

j(".delete-denomination").live("click", function(){ 
    j(this).parent().remove(); 
 });

jQuery 1.4.3 +

j(".form-denomination").delegate(".delete-denomination", "click", function(){ 
   j(this).parent().remove(); 
});

Answer 2

问题在于顺序问题以及何时评估表达式。当您使用选择器调用jQuery时，此时将评估选择器以选择当时存在的匹配元素。然后，单击处理程序仅注册到那些元素。后来创建的元素自然不会受到影响。

另一个例子中演示了一个解决方案，它使用jQuery的“实时事件”在每个事件被触发时应用选择器，以确定它匹配的元素（如果有的话）。这种方法有性能影响。

另一种解决方案是在创建元素时在新创建的元素上注册所需的事件处理程序。

Answer 3

为克隆方法添加'true'，以便复制数据以及附加到原始元素的事件。

rowTemplate = j('.form-denomination:first-child').clone(true);

默认情况下禁用此功能。这是克隆文档： https://api.jquery.com/clone/

P.S。您不需要document.ready中的click功能，直到点击后它才会绑定。

jQuery无法使用jQuery.appendTo（）识别附加的克隆元素

3 个答案: