重复jquery ui问题

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

我还在表单中使用了jquery ui（datepicker，autocomplete..etc） 。

复制复制一切，甚至是日期选择器和自动复制的附加htmls，因为插件试图不留下任何接口片段。 当克隆第一行时，克隆所有内容，甚至克隆事件。 因此，当我单击新出现的datepicker输入时，日历事件将在第一行的元素上运行。

我正试图找到决定。 这是我到目前为止的想法..

1. 将jquery ui（datepicker和autocomplete）声明为live ？ 喜欢

   $（“。dates”）。live（’…’，function（）{$（this）.datepicker（）;}）

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

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

   $（ “＃id_birthday_1”）日期选择器（）。

   这似乎是最好的主意，但重复已经复制了额外的元素/ htmls。 所以它会重新渲染元素。

3. 我应该编辑js插件吗？ 比如绑定所有jquery ui的事件声明，除了渲染，追加和样式。 那将是一个巨大的混乱。 我不想像这样陷入困境..每次如果我需要添加一个新的ui，我应该不断编辑那个js

每个想法都将不胜感激:)

Answer 1

formset插件可以在添加新表单时调用函数，您可以在那里初始化新添加的字段。 该函数应该采用单个参数， row ; 它将传递一个jQuery对象，包装刚刚添加的表单。

 $('#myFormset1Table tbody tr').formset({ added: function(row) { row.find(".date").datepicker(); } }); 

Answer 2

你的第一个想法是好的。

1. 给所有的datepickers一个类来识别它们。
2. 克隆它们。
3. 然后 ，使用jQuery的each函数将它们转换为datepickers：

。

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

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

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

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

它在表单中添加一个新行，然后初始化该行的datepicker。

Edit2：和上面的代码相当于

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

Answer 3

你可以听取onSelect或甚至是
$('.dates').focus(index){ $($('.dates')[index]) //etc. }