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

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

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

下面是

add_demination

函数的内容，该函数克隆第一行并用新索引替换任何克隆的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!");
}

每次单击

添加链接

时，弹出的警报都会显示新的列表大小（j（“.delete demination”）。长度增量为1，据我所知，新行添加成功

问题在于以下方法

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

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

但是，每次我单击

deleteBtn-[I]

（其中我是

克隆/附加的

行的索引）时，代码甚至没有进入

j（'.delete defination'）。click（）

函数，据我所知，Dom或jquery无法识别新行，因此jquery无法识别链接。这与之前的警告消息有点矛盾，即告知列表的大小已经增加

但是当我点击

deleteBtn-[I]

时，我是

未克隆的

行，一切正常

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

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

---

问题在于计算表达式的顺序和时间。当您使用选择器调用jQuery时，此时将对选择器求值，以选择当时存在的匹配元素。然后，单击处理程序仅注册到这些元素。稍后创建的元素自然不会受到影响

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

---

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

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

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

这在默认情况下是禁用的。以下是克隆文档：

---

另外，您不需要在文档中使用click功能。准备就绪，在单击之后它才会绑定。

经典事件委派问题，可能重复，这不是您要问的，但为什么要分配ID？动态元素是否确实被ID引用过？（我认为给他们一个普通的类会更合适。）谢谢你，问这个问题有没有办法解决jQuery1.4？根据要求，我们正在运行非常古老的遗留库…哈。。跟随@Benjamin Gruenbaum的链接，我使用

.live

，它就能工作了！谢谢大家！谢谢，我直到现在才看到你的帖子。是的，

.live

在这里工作。

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