jQuery。将选择器应用于动态表单中的每个字段答案

【问题标题】：jQuery. Apply selector to every field in a dynamic formjQuery。将选择器应用于动态表单中的每个字段
【发布时间】：2009-12-02 23:47:16
【问题描述】：

我有一个使用这个 jQuery 插件动态构建的表单

http://code.google.com/p/jquery-dynamic-form/

当我复制一个 div 时，div 中的所有字段都被复制，并且 -as plugin docs state- brackets 被添加到字段名称

我也使用 jQueryUI。我使用 datePicker 插件

$("#myDynDateField").datepicker();

当这个 datePicker 字段只有 1 个实例时，它可以正常工作。当我复制整个 div 时，datePicker 字段也被复制，并且错误开始

inst 未定义未捕获的异常：缺少此日期选择器的实例数据

1) 如何使用一个 jQuery 选择器来覆盖所有重复的字段？
2) 如何确保每个重复的 datePicker 字段都有正确的实例等？

非常感谢，

【问题讨论】：

标签： jquery forms jquery-ui dynamic css-selectors

【解决方案1】：

我不确定您是否使用$.clone() 来“复制”您的元素，但如果是，问题可能源于传入true 标志。例如$('div#id').clone(true) 。这会克隆元素以及附加到它的事件（以及它的子元素）。但是在 jquery ui 元素上使用它可能会破坏一些东西，所以最好在重复后重新定义元素的 ui 信息。

虽然您没有以这种粒度控制它，但很有可能。或多或少，您遇到了问题，因为 jqueryui 不知道这些重复的表单字段。我建议删除 datepicker 字段的“复制”版本，并将其替换为新的 datepicker 字段。

类似这样的：

// code to duplicate form
// ...
// Now replace the element with one just like it but without any events
$('#newDupedForm')
    .find('.datefield')
    .replaceWith(
        $(this).clone(false).datepicker(options)
    );

这应该从另一个元素中删除任何指向旧 jquery ui datepicker 的链接并实例化一个新元素，但是如果我缺少某些东西，您总是可以从头开始创建输入元素并执行 replaceWith用那个。

【讨论】：

嗨，亚历克斯。我正在使用动态表单插件。我不知道它是否使用 $.clone() 函数。我应该在插件代码中寻找并检查这一点，但我对 jQuery 插件编码了解不多，无法对其进行一些更改...
另外，如果我做 replaceWith 的事情会发生什么？它（重复的 datePicker 字段）是否具有与原始名称相同的 id、名称？
你不应该一开始就复制任何带有 id 属性的东西，它会让你的选择器引擎哭泣。它的所有内容都与原始元素相同，但不会包含日期选择器在第一个元素上放置的任何事件。

【解决方案2】：

当我实施in this thread 的建议时，它开始为我工作：

$('input.hasDatepicker', $clone).removeClass('hasDatepicker');

如果您使用的是$.slideDown，似乎有必要在幻灯片完成后执行此操作，如下所示：

$clone.slideDown(function() { 
    $('input.hasDatepicker', $clone).removeClass('hasDatepicker');
});

我希望这对其他人有所帮助；这对我来说很烦人！

【讨论】：