克隆jQuery UI datepicker时的问题
我有一个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();
仍然没有运气。
我不明白的是，只有日期选择行为是错误的，其他一切都按预期工作。
我真的不知道现在还要检查什么..
这是问题所在。 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(); }
这几乎就是这样。 无论什么时候克隆（真实），从长远来看，它会让你头疼。
这适用于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 ，这是不一样的。
如果在克隆之前调用.datepicker('destroy').removeAttr('id') ，然后重新启动日期选择器，它将起作用。
这似乎是一个破坏的bug，因为它应该将元素返回到它的原始状态。
做就是了
$('input.datefield').datepicker("destroy");
在克隆div之前。 然后插入克隆后再次绑定datepicker
$('input.datefield').datepicker();
一种’hacky’解决方案，但它完美无缺。
$('input.datefield').datepicker("destroy"); $('input.datefield').datepicker();
它运作良好。 但就这样做，datepicker将在克隆输入上打开并将日期设置为原始输入（因为它们具有相同的ID）
要解决此问题，您必须更改克隆输入的id属性。
dp = < cloned input > var d = $('input.vDateField'); dp.removeClass('hasDatepicker'); dp.attr('id', dp.attr('id')+d.length); d.datepicker("destroy"); d.datepicker();
它会很棒！
这是它对我有用的方式：
首先，您需要从克隆元素中删除类hasDatepicker ，因为这是阻止datepicker附加到特定元素的原因。
然后你必须从每个克隆元素中删除id属性.datepicker（）将假定将datepicker添加到此元素。
那个电话之后。 克隆元素上的datepicker （）。
newDiv.find('.classAttributeGivenForDatepicker').each(function() { $(this).removeAttr('id').removeClass('hasDatepicker'); $(this).datepicker({dateFormat: 'dd-mm-yy', minDate: 0, autoclose: true,}); });
怎么改变订单？
mydiv = $('#someDiv'); // clone without the events and insert newDiv = myDiv.clone(false).insertAfter(myDiv); // datepicker won't re-init if this class is present // not necessary anymore // newDiv.find('.hadDatepicker').removeClass('hadDatepicker'); newDiv.find('input.datefield').datepicker(); // datepicker attached as a last step mydiv.find('input.datefield').datepicker();
老实说，我不知道datepicker如何在内部工作。 我的预感是它存储在jQuery DOM存储中的东西。 我们不惜一切代价避免复制它。
（在这些代码行之间可能有很长的业务逻辑。重点是在将datepicker放在其上之前备份#someDiv。）
确保新克隆的日期选择器具有与原始名称和ID不同的名称和ID。 如果它们都具有相同的名称，那么您描述的行为将是正常的。
尝试将最后一行更改为：
newDiv.find('input.datefield').attr('id', 'newDatePicker').attr('name', 'newDatePicker').datepicker();
完整的解决方案适合我。
//before $('input.fecha').datepicker("destroy"); newcell.innerHTML = table.rows[0].cells[i].innerHTML; //change de input id $("input.fecha").attr("id", function (arr) {return "fecha" + arr;}); //after $('input.fecha').datepicker({defaultDate: "+1w",changeMonth: true,numberOfMonths: 1, showOn: "button", buttonImage: "images/calendar.gif", buttonImageOnly: true, showLabel:false, dateFormat:"yy-mm-dd"});
和html td表。
'fecha','id' => 'fecha','class' => 'fecha')); ?>
希望这对你有所帮助。
美好的一天
var dt = new Date(); var month = dt.getMonth(); var day = dt.getDate(); var year = dt.getFullYear()-5; $newClone.children().children("#fna"+clickID) .attr({ 'id': 'fna1'+newID, 'name': 'fna'+newID, 'value': day + '-' + month + '-' + year }) .datepicker("destroy") .datepicker({ firstDay: 1, changeMonth: true, changeYear: true, yearRange: 'c-100:c', defaultDate: '-1y', dateFormat: 'dd-mm-yy' , nextText: "Mes siguiente", prevText: "Mes anterior", monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'], dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'] });
这可能有点晚了，但上面的所有建议都不适合我，我想出了一个简单的解决方案。
首先，导致问题的原因是：JQuery将datepicker分配给元素id。 如果你是克隆元素，那么也可以克隆相同的id。 哪个jQuery不喜欢。 您最终可能会收到空引用错误或分配给第一个输入字段的日期，无论您单击哪个输入字段。
解：
1）销毁datepicker 2）为所有输入字段分配新的唯一ID 3）为每个输入分配datepicker
确保您的输入是这样的
在克隆之前，销毁datepicker
$('.n1datepicker').datepicker('destroy');
克隆后，也添加这些行
var i = 0; $('.n1datepicker').each(function () { $(this).attr("id",'date' + i).datepicker(); i++; });
并且魔术发生了
如果元素的ID已更改，则Datepicker不会。 因此，如果必须要求，最好不要更改元素的id。 但是如果你真的需要更改ID并且更改了id需要使用datepicker，那么请遵循它 ：
$(selector).removeClass('hasDatepicker'); $(selector).datepicker({ changeMonth: true, changeYear: true });