Question

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

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

当我复制 div 时， div 中的所有字段都会重复，而-as插件文档状态 - 括号会被添加到字段名称

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

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

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


inst is undefined
uncaught exception: Missing instance data for this datepicker

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

提前多多感谢，

Answer 1

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

虽然您没有以这种粒度控制它，但机会很多。或多或少，您遇到了问题，因为jqueryui不知道这些重复的表单字段。我建议删除datepicker字段的'duped'版本，并用新的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的任何链接并实例化一个新的，但是如果有一些我缺少的东西，你总是可以从头创建输入元素并执行{{1用那个。

Answer 2

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

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

如果你正在使用$.slideDown，那么在完成幻灯片后似乎有必要这样做：

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

我希望这有助于他人;这对我来说很烦人！

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

2 个答案: