jquery - 重复的jquery ui问题

Question

我正在开发一个 Django 项目。但我的问题是在 JQuery 上。 我用过jquery.formset.js JQuery 插件可在 inline_formsets、formset_factories 中动态添加表单。这效果非常好。它使用其他装饰标签(如 div、span、img...)复制第一行元素，并在表格底部添加新行。因此重复的行可以像原点一样出现。

我还使用jquery ui (datepicker, autocomplete..etc)在我的表格中。

复制会复制所有内容，甚至是日期选择器和自动完成功能附加的 html，因为该插件会尝试不留下任何界面片段。当它克隆第一行时，所有内容都会被克隆，甚至事件也会被克隆。因此，当我单击新出现的日期选择器输入时，日历事件将在第一行的元素上运行。

我正在努力寻找决定。到目前为止，这是我的想法..

1. 将 jquery ui(日期选择器和自动完成)声明为实时？喜欢

   $(".dates").live('...', function() { $(this).datepicker(); } )

   但我不确定应该为此处理哪个事件。我猜想处理新创建或附加的元素是不可能的。

2. 将脚本放入行内？就在元素之后

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

   这似乎是最好的主意，但复制已经复制了额外的元素/html。因此它将重新渲染元素。

3. 我应该编辑 js 插件吗？就像绑定(bind)所有 jquery ui 事件的声明一样，除了渲染、附加和样式之外。那将是一个巨大的困惑。我不想像这样搞砸。每次如果我需要添加新的 ui，我应该不断编辑该 js

每个想法都会受到赞赏:)

Answer 1

你的第一个想法是个好主意。

1. 为所有日期选择器提供一个类来识别它们。
2. 将它们全部克隆。
3. 然后，使用 jQuery each 函数将它们转换为日期选择器:

.

$(".dates").each(function (i) {
    $(this).datepicker();
}

所以基本上，在激活日期选择器之前复制所有元素。 jQuery 的 each 允许您一步激活整个元素列表。

编辑:如果您需要动态生成新的克隆，您可以将该行的 HTML 存储在变量中。当您的用户添加一行时，您可以执行以下操作:

$(".date", $(rowHTML).appendTo($("#my-form-fields"))).datepicker();

它将新行添加到表单中，然后初始化该行的日期选择器。

Edit2: 上面的代码相当于

$(rowHTML).appendTo($("#my-form-fields")).find(".date").datepicker();