Question

我有一个带有可重复输入集的表单。我想克隆集合（class ='repeatableItemInfo'），而不保留用户输入的数据。以下做得很好：

var subform = $('.repeatableItemInfo').clone(true);

    $('#addMore').click(function() {

    subform.appendTo('#itemInfo');

});

令人讨厌的皱纹是其中一个可重复的表单字段是一个“选择”列表，其中包含一个“更改”事件。上面的代码重现了“select”项，但没有重现它的相关事件（尽管有“true”参数）。

如果我将第一行弹出到这个函数中：

$('#addMore').click(function() {

    var subform = $('.repeatableItemInfo').clone(true);

    subform.appendTo('#itemInfo');

});

然后“更改”事件会正常进行，但用户输入的数据也是如此。

任何人都可以帮我解决没有数据的行为吗？

Answer 1

我想问题是你在clone()之后的选择上绑定了更改事件。这是我唯一可以解释的内容（clone(true)暗示clone(true,true)顺便说一句）

所以，我不知道您的代码是如何组织的，但是尝试通过在绑定事件后克隆来解决问题。你也可以这样做：

var subform = null; setTimeout(function() { subform = $('.repeatableItemInfo').clone(true); }, 0);

只是简单地排队克隆，没有延迟。

Answer 2

一些一般性的观察，基于我必须根据你的问题所提供的代码做出的假设：

您应该有一个隐藏的父元素，其中包含具有所需默认值的元素，即您要克隆的项目。从代码的外观来看，您正在使用类选择器来获取要克隆的元素。拥有带id的隐藏元素将确保您克隆正确的元素。

$("#idOfParentTemplateElement .repeatableItemThing").clone().appendTo("#itemInfo");

您应该使用jQuery.live或jQuery.on来结束您的更改事件，而不是使用onchange属性或jQuery.Bind。您可以为选择列表提供一个类，然后使用该类名绑定项目以执行特殊操作。

$("#itemInfo").on("change", ".class-for-special-event-thing", specialEventThingFunction)

Answer 3

为什么不只是要有一组干净的隐藏元素来克隆？要解决事件处理程序问题，您可以确保您的事件处理程序正在使用.live，这样任何克隆的新选择都会在添加时被选中。

在jQuery中克隆表单元素而不携带用户输入数据

3 个答案: