javascript - jQuery DatePicker 上的 Destroy 方法删除了 DatePicker，但是当我重新实例化一个新的时，仍然选择了先前选择的 Date 值

Question

我创建了一个演示来展示我在使用名为 Zebra-Datepicker 的 jQuery 库时遇到的问题。

Zebra-Datepicker 文档:http://stefangabos.ro/jquery/zebra-datepicker/ Zebra-Datepicker GitHub:https://github.com/stefangabos/Zebra_Datepicker

我的演示展示了如何:

• 创建一个 DatePicker 实例，
• 选择一个日期值，
• 销毁日期选择器实例，
• 创建日期选择器的新实例，
• 选择一个新的日期值....

问题:

问题是销毁 DatePicker 似乎并没有销毁之前选择的日期值!所以当实例化一个新的 DatePicker 时，它选择了以前的 Date 值而不是新值!

我真的需要一些专家的帮助，因为这对我修复将项目任务记录加载到模态 DIV 中的项目至关重要。我的 Task 记录都共享单个 Modal 的 DOM 中的 HTML，只是替换一个 Task 的占位符变量，然后在 Modal 关闭时重新设置它们以供下一个 Task 反复执行该过程。

我的演示 JSFiddle:http://jsfiddle.net/jasondavis/Lqwfamoc/17/

如果您按照我的演示中的这些步骤操作，您就会明白我的意思...

1. 点击 Date SPAN 以显示 DatePicker 日历并点击日期 2015-05-30
2. 点击销毁DatePicker按钮
3. 点击 Date Span，它会显示 DatePicker 丢失，因为我们销毁了它。
4. 现在点击 UPDATE DatePicker to 2015-05-24 按钮，将 Date SPAN 值设置为新日期 2015-05-24。当我们再次实例化 DatePicker 插件时，它应该在 SPAN 中获取这个新的日期值并将 DatePicker 设置为这个日期!
5. 现在点击 Build New DatePicker 按钮来实例化一个新的 DatePicker
6. 现在单击 Date SPAN 文本:2015-05-24 以再次显示 DatePicker 日历
7. 您现在应该看到原始的第 30 天 2015-05-30 在 DatePicker 中被选中，即使它现在应该具有我们的日期值 2015-05-24 因为我们 destroy() 并在销毁旧的 DatePicker 之后 重新实例化 选择了它!

显然，Destroy 方法没有完全销毁或发生其他事情？有想法该怎么解决这个吗？

实际 Zebra-Datepicker lIbrary 的 destroy() 方法的源代码: 位于此处
https://github.com/stefangabos/Zebra_Datepicker/blob/master/public/javascript/zebra_datepicker.src.js#L1469

/**
 *  Destroys the date picker.
 *
 *  @return void
 */
plugin.destroy = function() {

    // remove the attached icon (if it exists)...
    if (undefined !== plugin.icon) plugin.icon.remove();

    // ...and the calendar
    plugin.datepicker.remove();

    // remove associated event handlers from the document
    $(document).unbind('keyup.Zebra_DatePicker_' + uniqueid);
    $(document).unbind('mousedown.Zebra_DatePicker_' + uniqueid);
    $(window).unbind('resize.Zebra_DatePicker_' + uniqueid);

    // remove association with the element
    $element.removeData('Zebra_DatePicker');

};

Answer 1

我发现了问题。你需要改变这个:

$('#updateDate').on('click', function(){
    $('#task-modal-due-date-span').text('2015-05-24');
}); 

为此:

$('#updateDate').on('click', function(){
    $('#task-modal-due-date-span').text('2015-05-24').val('2015-05-24');
}); 

原因是当您重建一个新的 DatePicker 控件时，它查看的是范围的值，而不是范围的文本。 (注意:通常您会将 DatePicker 附加到“input”元素，而不是“span”元素。)