我正在构建一个项目管理应用程序，当单击任务时，项目任务将在任务模式分区中打开。
我的任务模式在DOM中为页面上的每个任务使用单个模态。这意味着，不是在所有被点击的50个任务的HTML中加载，而是使用HTML for 1 Modal，并且只要在每次任务模态为＆＃34;打开＆＃34;时替换任务数据。并且＆＃34;关闭＆＃34;。
除了更改模式中充当占位符的所有任务数据字段外。有些必须被终止并且JavaScript被重新实例化。
Modal中的大多数任务数据字段都使用名为X-Editable的库，这是一个jQuery In-Line-Edit库。我还有其他库，如自定义滚动条，加载器，日期选择器等......
当任务模式被关闭时，所有这些JavaScript都必须重置＆＃34;这样当单击要打开的新任务时，它可以开始新的替换占位符字段。
另外，如果任务缺少上一个任务设置的字段，我不希望上一个任务记录的值显示在当前查看的任务模式上。
既然我已经解释了我的JavaScript任务模式的大部分功能，我可以提出我的问题......
我有一个任务栏位，用于设置截止日期，我在其中显示截止日期。
我的DatePicker的库名为 Zebra-Datepicker ，文档位于此处：http://stefangabos.ro/jquery/zebra-datepicker/
Zebra-Datepicker GitHub页面位于：https://github.com/stefangabos/Zebra_Datepicker
在＆＃34;方法＆＃34;中的文档页面底部附近section是一个destroy()方法，说明了这一点：
destroy(): Removes the plugin from an element
因此，当我在我的应用程序中关闭一个任务模式时，我调用我的函数，在trun中也运行DatePicker元素上的destroy()函数。
问题是，我可以打开另一个任务模态并且所有DOM值都将被正确设置，但是当我在DatePicker中选择一个值时，它会突出显示Previous Task Modal中的OLD值！
显然，DatePicker实例并未像它所说的那样被销毁！
我非常感谢所有帮助，因此我可以在启动新的任务模式时重新开始。请帮忙！
我还有一个在这里运行的JSFIddle http://jsfiddle.net/jasondavis/Lqwfamoc/13/，其库设置类似于我的应用程序，除了它没有Modal打开和关闭的东西。它只有一个运行DatePicker的实例。它可用于试验destroying和re-instantiating DatePicker插件的新实例。
以下是我制作的两种方法的代码：
在打开新任务模式时，在DueDate任务字段上初始化Zebra-Datepicker插件的新实例的方法。
setUpDueDatePicker: function() {
// Get Due Date val from DOM
var taskDueDateVal = $('#task-modal-due-date-span').text();
var setTaskDueDateVal = '';
// set DueDate into cached value
projectTaskModal.cache.taskDueDate = taskDueDateVal;
// If a real DATE value is set in DueDate in the DOM, then set it in the DatePicker
if(taskDueDateVal != 'None' && taskDueDateVal != '0000-00-00 00:00:00'){
// DATE value to set the DatePicker
setTaskDueDateVal = taskDueDateVal;
}
// Instantiate and setup the DatePicker plugin on our DueDate element
$('#task-modal-due-date-span').Zebra_DatePicker({
always_visible: $('#task-modal-due-date-cal'),
format: 'm/d/Y',
start_date: setTaskDueDateVal,
/*
Callback function to be executed when a date is selected
The callback function takes 4 parameters:
– the date in the format specified by the “format” attribute;
– the date in YYYY-MM-DD format
– the date as a JavaScript Date object
– a reference to the element the date picker is attached to, as a jQuery object
Methods
*/
onSelect: function(dateInFormat, dateDefaultFormat, dateObj, datePickElem) {
var dueDate = dateInFormat;
console.log('Pre AJAX Due Date Save: '+dueDate);
// Make AJAX POST to save Due Date value to the server and update DOM.
$.ajax
({
type: "post",
url: "updateTaskDueDate",
data: "date="+dueDate,
success: function(result)
{
console.log('SUCCESS AJAX Due Date Save: '+dueDate);
// UPDATE DOM with new DueDate value
// (Task list if it exists, Modal DueDate field, Modal DueDate Header field)
if(projectTaskModal.cache.isTaskListInDom){
projectTaskModal.updateDom.updateTaskField('list', 'dueDate', dueDate);
}
projectTaskModal.updateDom.updateTaskField('modal', 'dueDate', dueDate);
// Update Project-wide cached DueDate var
projectTaskModal.cache.taskDueDate = dueDate;
// Close/Hide Date Picker Calendar, until it is clicked to show and change DueDate again
$('#task-modal-due-date-cal').hide();
}
});
},
// Reset Due Date in DOM and save empty DueDate value on server
onClear: function(datePickElem) {
// Set Due Date to "None" in DOM
var dueDate = 'None';
// AJAX Update Due Date to remove any due dates in DB
// set to "0000-00-00 00:00:00" or else "null"
$.ajax
({
type: "post",
url: "updateTaskDueDate",
data: "date=0000-00-00 00:00:00",
success: function(result)
{
console.log('SUCCESS AJAX Due Date Save: '+dueDate);
// UPDATE DOM Due Date fields
if(projectTaskModal.cache.isTaskListInDom){
projectTaskModal.updateDom.updateTaskField('list', 'dueDate', dueDate);
}
projectTaskModal.updateDom.updateTaskField('modal', 'dueDate', dueDate);
// Update Project-wide cached DueDate var
projectTaskModal.cache.taskDueDate = dueDate;
// Close/Hide Date Picker Calendar, until it is clicked to show and change DueDate again
$('#task-modal-due-date-cal').hide();
}
});
}
});
// Show Date Picker Calendar when "Due Date" SPAN text is clicked on:
$('#task-modal-due-date-span').on('click', function(){
$('#task-modal-due-date-cal').show();
});
},
销毁杀死DatePicker插件实例的方法
// When Task Modal window is CLOSED, Destroy and reset the DueDate so that when a New Task is opened in the Modal, we can setup a new DueDate DatePicker instance
destroyDueDatePicker: function() {
alert('DESTROY Due Date picker');
// remove the "selected" class from all cells that have it
$('td.dp_selected', '#task-modal-due-date-cal').removeClass('dp_selected');
// Find our DueDate DatePicker Instance
var dueDatePicker = $('#task-modal-due-date-span');
// Run the destroy() Method on it that is shown in the Documentation for Zebra-Datepicker library here:
// http://stefangabos.ro/jquery/zebra-datepicker/
// Near the bottom of page in the "Methods" section.
// destroy(): Removes the plugin from an element
dueDatePicker.destroy();
},
实际Zebra-Datepicker lIrary的destroy（）方法的源代码：
位于https://github.com/stefangabos/Zebra_Datepicker/blob/master/public/javascript/zebra_datepicker.src.js#L1372
/**
* 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');
};
答案 0 :(得分：3)
我尝试了以下代码，destroy方法对我来说很好，
//plugin initialization
$('#task-modal-due-date-span').Zebra_DatePicker({
....
....
});
$('#task-modal-due-date-span').on('click', function(){
$('#task-modal-due-date-cal').show();
});
//get the Zebra-datepicker element
var datepicker = $('#task-modal-due-date-span').data('Zebra_DatePicker');
//destroys the plugin from an element
datepicker.destroy();
在Fiddle中查看点击设置截止日期将不会打开日历，因为我刚刚在插件初始化后调用destroy。