克隆 jQuery UI 日期选择器时出现的问题 [英] 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 属性.如果您的克隆例程管理它(这意味着 datepicker 不知道克隆)，则克隆这些元素会导致更多具有相同 ID(jQuery 不喜欢)或不同 ID 的元素.换句话说，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 元素而不是可见元素中复制的，所以我可以随意决定是否需要在克隆之前或之后进行绑定.因此，将#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 日期选择器时出现的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！