重复的jquery ui问题

Posted 2023-02-24

【中文标题】重复的jquery ui问题

【英文标题】：Duplicate jquery ui problem

【发布时间】：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

【参考方案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.