3

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

<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").length 增加 1），据我了解，新行已成功添加。

问题是以下方法

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

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

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

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

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

4

3 回答 3

3

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(); 
});
于 2013-03-22T02:55:41.690 回答
1

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

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

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

于 2013-03-22T03:17:39.687 回答
1

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

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

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

Ps您不需要document.ready中的点击功能，它不会在点击后绑定。

于 2018-06-05T16:39:32.153 回答