在 jQuery 中克隆表单元素而不保留用户输入数据
我有一个带有可重复输入集的表单。我想克隆该集合(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');
});
然后“更改”事件会正确延续,但用户输入的数据也会正确延续。
谁能帮助我在没有数据的情况下获得行为?
I have a form with repeatable sets of inputs. I want to clone the set (class='repeatableItemInfo') while NOT retaining the data that the user enters. The following does a good job of that:
var subform = $('.repeatableItemInfo').clone(true);
$('#addMore').click(function() {
subform.appendTo('#itemInfo');
});
The nasty wrinkle is that one of the repeatable form fields is a "select" list with a "change" event linked to it. The code above reproduces the "select" item, but not its associated event (despite the "true" argument).
If I pop the first line into the function like this:
$('#addMore').click(function() {
var subform = $('.repeatableItemInfo').clone(true);
subform.appendTo('#itemInfo');
});
Then the "change" event carries over properly, but so does the data that the user has entered.
Can anyone help me get the behavior without the data?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
我猜问题是您将更改事件绑定在
clone()
after 上。这是我看到的唯一可以解释它的东西(顺便说一句,clone(true)
意味着clone(true,true)
)所以,我不知道你的代码如何是有组织的,但尝试通过在绑定事件后进行克隆来解决问题。您还可以这样做:
它只是将克隆排队,没有延迟。
I guess the problem is that you're binding the change event on the select after the
clone()
. That's the only thing I see that can explain it (clone(true)
impliesclone(true,true)
by the way)So, I don't know how your code is organized, but try to fix the problem by cloning after binding events. You can also do:
which simply queues up the cloning, without delay.
基于我必须根据您的问题提供的代码做出的一些一般性观察:
您应该有一个隐藏的父元素,其中包含具有所需默认值的元素,即您想要克隆的项目。从代码的外观来看,您正在使用类选择器来获取要克隆的元素。拥有带有 id 的隐藏元素将确保您克隆正确的元素。
您应该使用 jQuery.live 或 jQuery.on 连接更改事件,而不是使用
onchange
属性或jQuery.Bind
。您可以为选择列表指定一个类,然后将项目与该类名绑定以执行特殊操作。A couple general observations, based on assumptions I had to make from what code your question provided:
You should have a hidden parent element that contains the element with the desired default values be the item you want cloned. From the looks of your code, you're using a class selector to grab the element to clone. Having a hidden element with an id will ensure you're cloning the correct element.
You should use jQuery.live or jQuery.on to wire up your change event, instead of using the
onchange
attribute orjQuery.Bind
. You can give your select list a class and then bind items with that class name to do something special.为什么不直接克隆一组干净的隐藏元素呢?要解决事件处理程序问题,您可以确保事件处理程序使用 .live,这样任何克隆的新选择都会在添加时被拾取。
Why not just have a clean hidden set of elements to clone? To solve the event handler issue you could make sure your event handler is using .live that way any new selects that are cloned are picked up as they are added.