克隆jQuery UI datepicker时出现问题 [英] problem when cloning jQuery UI datepicker

问题描述

我有一个div，其中有一个日期选择器.我用这样的东西来克隆它:

I have a div in which there is a datepicker. I use something like this to clone it:

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();

这是我的代码的精简版本.它可以正常工作，并且日历按预期的位置显示在预期的位置..但是单击日期时，上一个日期选择器的值会更新..(从中克隆的日期).

This is a stripped down version of my code. It works and the calendar shows up as expected where it is expected .. but when a date is clicked, the previous datepicker's value gets updated.. (the one from which it was cloned).

我以前曾尝试销毁(存在的)实例:

I've tried to destroy the (inexisting) instance before like this:

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

没有运气..

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

I've checked how it keeps track of instances and manually cleared the data like this:

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

还是没有运气.

我不明白的是，只有日期选择行为存在问题，其他所有功能都可以正常工作.

What I don't understand is that only the date selection behavior is buggy, everything else works as expected.

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

I really don't know what else to check now ..

推荐答案

这是问题所在. datepicker为初始化时绑定的输入字段创建基于UUID的ID属性.克隆这些元素会导致更多元素具有相同的ID(jQuery不喜欢)或具有不同的ID(如果您的克隆例程对此进行管理)(这意味着datepicker不了解克隆). 换句话说，datepicker仅在调用它时初始化与选择器匹配的所有元素.实际上，试图破坏/禁用/启用一遍又一遍的意义不大，当您只需包装在创建克隆所使用的任何函数中都可以进行init调用.

Here's the problem. datepicker creates UUID-based ID attributes for the input fields it binds when you initialize it. You cloning those elements results in more elements with either the same ID (which jQuery does not like) or a different ID if your clone routine manages that (which means datepicker does not know about the clones). In other words, datepicker only initializes all the elements matching your selector at the time you call it. it actually makes less sense to try to destroy/disable/enable over and over, when you can just wrap the init call inside whatever function you use to create the clones.

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

Because my clone functions typically copy from hidden DOM elements rather than visible ones, I have the luxury deciding whether I need to bind before or after cloning. So, make #templateDiv a hidden element on your page with the INPUT element already in there.

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();
}

几乎可以做到.只要有可能就克隆(true)，从长远来看将为您免除头痛.

and that pretty much does it. Clone(true) whenever you can, it'll save you headaches in the long run.

这篇关于克隆jQuery UI datepicker时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！