jQuery.clone(false)仍然从原始数据源复制数据

jQuery.clone(false) still copy data from original source

本文关键字：原始数据 原始 数据源 复制 数据 clone false jQuery      更新时间：2023-09-26

这篇文章是上一篇文章的后续，该应用程序运行在jQuery 1.4上，但任何版本的建议都是值得赞赏的:

目前的问题是甚至使用

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

和

var newRow = rowTemplate.clone().attr('id', newRowId);

我可以看到newRow仍然持有旧的数据在第一个子列表使用firebug，无论我从网页选择。

例如，如果要克隆的列表的第一个子节点是node[0]

<select id="_denominations[0].id.denominationId" class="removableDenom" name="denominations[0].id.denominationId">
    <option value="100">100</option>
    <option value="1000">1000</option>
    <option value="10000">10000</option>
    <option value="500">500</option>
    <option value="5000">5000</option>
    <option value="50000" selected="selected">50000</option>
</select>

我在节点[2]后面添加一个新行，它看起来像

<select id="_denominations[3].id.denominationId" class="removableDenom" name="denominations[3].id.denominationId">
    <option value="100">100</option>
    <option value="1000">1000</option>
    <option value="10000">10000</option>
    <option value="500">500</option>
    <option value="5000">5000</option>
    <option value="50000" selected="selected">50000</option>
</select>

看它仍然显示50000作为下拉框的选择，即使它显示100在网页上那么这是怎么回事呢?

它仍然显示50000作为下拉框的选择，即使它在网页上显示100

您看到的是HTML源代码。50000不是页面上显示的当前值，而是页面加载时显示的值。

恐怕你对.clone()的要求比它能给的要多。它不会为你更新id;它不会为您更新名称;它不会为您清除表单数据。你必须自己做所有这些事情——你可以在模板上清除表单数据，但你必须在插入时设置id。

rowTemplate = j('.form-denomination:first-child').clone();
rowTemplate.find("input[value], textarea").val("");
rowTemplate.find("select").each(function() { this.selectedIndex = 0; });

如果我们能够假设第一行总是具有像[0]这样的id和名称，那么插入之前的更新将会更容易:

var rowId = "[" + j('.form-denomination').length + "]";
var newRow = rowTemplate.clone();
newRow.find("[id]").each(function() { var $t = $(this); $t.attr("id", $t.attr("id").replace("[0]", rowId)); });
newRow.find("[name]").each(function() { var $t = $(this); $t.attr("name", $t.attr("name").replace("[0]", rowId)); });
相关文章：