克隆jQuery UI datepicker时的问题

Question

我有一个div,其中有一个datepicker.我用这样的东西来克隆它:

mydiv = $('#someDiv');

// works fine so far
mydiv.find('input.datefield').datepicker();

// clone without the events and insert
newDiv = myDiv.clone(false).insertAfter(myDiv);

// datepicker won't re-init if this class is present
newDiv.find('.hadDatepicker').removeClass('hadDatepicker');

// reinitialize datepicker
newDiv.find('input.datefield').datepicker();

这是我的代码的精简版本.它工作正常,日历按预期显示在预期的位置.但是当点击日期时,前一个日期选择器的值会更新..(克隆它的那个).

我试图在这之前销毁(不存在的)实例:

newDiv.find('input.datefield').datepicker('destroy').datepicker();

没运气 ..

我已经检查了它如何跟踪实例并手动清除数据,如下所示:

newDiv.find('input.datefield').data('datepicker', false).datepicker('destroy').datepicker();

仍然没有运气.

我不明白的是,只有日期选择行为是错误的,其他一切都按预期工作.

我真的不知道现在还要检查什么..

Answer 1

这适用于jQuery UI 1.7.2

var mydiv = $('#someDiv');
mydiv.find('input.datefield').datepicker();
var newDiv = mydiv.clone(false).attr("id", "someDiv2").insertAfter(mydiv);
newDiv.find('input.datefield')
  .attr("id", "")
  .removeClass('hasDatepicker')
  .removeData('datepicker')
  .unbind()
  .datepicker();

查看http://jsbin.com/ahoqa3/2以获得快速演示

顺便说一句.您似乎在问题的代码中有不同的错误.css类hasDatepicker不是hadDatepicker,你曾经写过mydiv,下一次变量myDiv是不一样的.

Answer 2

这是问题所在.datepicker为初始化时绑定的输入字段创建基于UUID的ID属性.克隆这些元素会导致更多元素具有相同的ID(jQuery不喜欢),或者如果克隆例程管理它,则会产生不同的ID(这意味着datepicker不知道克隆).换句话说,datepicker仅在您调用它时初始化与您的选择器匹配的所有元素.当你可以将init调用包装在用于创建克隆的任何函数内时,它实际上没有意义去反复销毁/禁用/启用.

因为我的克隆函数通常从隐藏的DOM元素而不是可见的元素中复制,所以我可以决定是否需要在克隆之前或之后进行绑定.因此,将#templateDiv设置为页面上的隐藏元素,其中已存在INPUT元素.

mydiv = $('#templateDiv');
mydest = $('#someDiv');

function make_the_donuts() {
    newDiv = myDiv.clone(true).insertAfter(mydest);  
    // attach datepickers by instance rather than by class
    newDiv.find('input.datefield').datepicker();
}

这几乎就是这样.无论什么时候克隆(真实),从长远来看,它会让你头疼.

Answer 3

如果您.datepicker('destroy').removeAttr('id')在克隆之前调用然后重新初始化日期选择器它将起作用.

这似乎是一个破坏的bug,因为它应该将元素返回到它的原始状态.

Answer 4

做就是了

$('input.datefield').datepicker("destroy");

在克隆 div 之前。然后在插入克隆后再次绑定日期选择器

$('input.datefield').datepicker();

一种“hacky”解决方案，但效果很好。