jQuery不能使用jQuery.appendTo（）来识别附加的克隆元素 [英] jQuery cannot recognize appended cloned elements using jQuery.appendTo()

问题描述

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

I want to make a list of group inputs allow user to dynamically let user add/remove group row:

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

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

So each row include a group of form-field which include an input or select component(not show in above code) and some hidden fields and a delete link to remove current row from view.

此外，我创建一个链接到动态添加一行新的部分

Also I create a link to dynamic add a new row into the section

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，并在列表的最后一行之后追加克隆的行。

and here is the content of add_denomination function that clone the first row and replace any cloned id with new index, and append the cloned row after last row of the list.

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），这在我的理解中，新行成功添加。

each time click on the add-link the pop up alert show the new list size (j(".delete-denomination").length increment by 1), which in my understanding, new row appended successfully.

问题是以下方法

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

只对非克隆的路线工作!!! 使用firebug我可以清楚地看到附加的行成功地附加了与原始行相同的结构和相同的元素，但唯一的区别是id。

ONLY WORKS FOR THE NON-CLONED ROW !!! Using firebug I can clearly see the appended row is successfully appended with same structure and same element as original rows but only difference is the id.

然而，每次当我点击 deleteBtn- [i] ，其中我是克隆/附加的行的索引，代码甚至不进入 j（'。delete-denomination'）。click（）函数，这在我的理解中，Dom或jquery不能识别新行h通过jQuery识别链接失败。这是一个矛盾的前一个警报消息，告诉列表的大小增长。

However, each time when I click on deleteBtn-[i], in which i is the cloned/appended row's index, the code even not going into the j('.delete-denomination').click() function, which in my understanding, Dom or jquery didn't recognize the new rows hence the failure of identifying the link by jQuery. It's kind of contradictory to the previous alert message that telling the size of list has grown.

但是当我点击 deleteBtn- [i] / code>其中我是非克隆行，一切正常...

But when I click on deleteBtn-[i] where i is the non-cloned row, everything works fine...

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

So the question is: how to append/add new doms and make them identified by jQuery or Dom? What is wrong in above processing? Is there any way to refresh the list so that Dom/jQuery understand the appended rows from all perspective?

推荐答案

jQuery 1.7+

jQuery 1.7+

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

jQuery 1.3 +

jQuery 1.3+

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

jQuery 1.4.3 +

jQuery 1.4.3+

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

这篇关于jQuery不能使用jQuery.appendTo（）来识别附加的克隆元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！