重复的jquery ui问题答案

【问题标题】：Duplicate jquery ui problem重复的jquery ui问题
【发布时间】：2011-05-07 16:53:56
【问题描述】：

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

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

复制会复制所有内容，甚至是日期选择器和自动完成附加的 html，因为插件会尽量不留下任何界面片段。当它克隆第一行时，所有内容都被克隆，甚至事件也被克隆。所以当我点击新出现的日期选择器输入时，日历事件在第一行的元素上起作用。

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

将 jquery ui（日期选择器和自动完成）声明为 live？喜欢

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

但我不确定应该为此处理哪个事件。我想处理新创建或附加的元素是不可能的。
将脚本放在行内？在元素之后

$("#id_birthday_1").datepicker();
这似乎是最好的主意，但复制已经复制了额外的元素/html。所以它会重新渲染元素。
我应该编辑 js 插件吗？就像绑定所有 jquery ui 的事件声明一样，除了渲染和附加和样式。那将是一个巨大的混乱。我不想这样搞砸了。每次如果我需要添加一个新的ui，我应该不断地编辑那个js

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

【问题讨论】：

我打赌两个盒子的 ID 相同
其实没有.. js插件使用表单前缀创建新的id

标签： jquery django jquery-ui django-forms

【解决方案1】：

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

给所有的日期选择器一个类来识别它们。
全部克隆。
然后，使用 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();

【讨论】：

是的，但是克隆在运行时（动态）工作，我的意思是在文件准备好之后。添加底部允许使用其元素创建一个新行。 each 函数只能作用于默认元素，但不能作用于新创建（克隆）的元素
是的，我也遇到过。你已经解决了这个问题@jargalan 吗？

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您可以收听onSelect 甚至可能
$('.dates').focus(index){ $($('.dates')[index]) //etc. }

【讨论】：