更改元素 ID 时 Datepicker 失去绑定

Posted 2023-05-09

【中文标题】更改元素 ID 时 Datepicker 失去绑定

【英文标题】：Datepicker loses binding when changing element ID

【发布时间】：2016-01-18 01:08:34

【问题描述】：

我在表单集上使用 jQuery datepicker，我们可以在其中添加和删除表单。添加新表单时，我在Form 原型中添加了一个set_fields 函数，该原型将日期选择器附加到新字段，并且工作正常。

但是，在删除表单时，我会从 DOM 中完全删除所选表单并更新每个其他表单的 ID，以便它们连续编号（因此后端可以期望给定数量的连续编号的表单，而不是维护一个“已删除”列表）。

我遇到的问题是，当我删除一个表单并且其余表单的 ID 已更改时，日期选择器的绑定会保留在下一个表单上，因此在一个表单中更改日期将更改字段的值下一个表格（最后一个表格给出错误Missing instance data for this datepicker）。在更改 ID 后，我尝试为表单调用 set_fields（因此在我更改了 ID 的所有字段上再次调用 datepicker()），但绑定仍然没有改变。我还尝试手动循环遍历所有带有附加日期选择器的元素，并再次在它们上调用datepicker()，但再次没有任何变化。

如果您需要查看代码的任何特定部分，请告诉我。

【问题讨论】：

如果没有看到你的代码就很难说，但是将 id 重新分配给 DOM 元素听起来不是正确的方法。也许你想切换类？

【参考方案1】：

如果您更改元素的 id，则必须删除“hasDatepicker”类，然后使用选择器重新初始化日期选择器。

示例：

$(selector).removeClass('hasDatepicker');
$(selector).datepicker(
  changeMonth: true,
  changeYear: true
);
                

【参考方案2】：

我最终找到了解决方案here。问题是当字段添加了日期选择器时，该字段被赋予了hasDatepicker 类。如果您随后尝试重新初始化该字段上的日期选择器，如果该字段已经具有 hasDatepicker 类，它将忽略它。所以我只是从我想要重新初始化的每个元素中删除了该类，然后调用了我的 set_fields 函数并且它起作用了！