Javascript 销毁jQuery插件实例，以便在插件销毁功能不起作用时重新实例化它？

我正在构建一个项目管理应用程序，当单击任务时，项目任务将在任务模式Div中打开

我的任务模式是在DOM中为页面上的每个任务使用单个模式。这意味着，它不是为50个点击的任务加载所有HTML，而是使用HTML for 1模式，并在每次任务模式为“打开”和“关闭”时简单地替换任务数据

除了更改模式中用作占位符的所有任务数据字段之外。有些必须终止，JavaScript必须重新实例化

模式中的大多数任务数据字段使用一个名为

X-Editable

的库，这是一个jQuery在线编辑库。我还有其他库，如自定义滚动条、加载程序、日期选择器等

当任务模式为“关闭”时，所有这些JavaScript也必须重置，以便在单击打开新任务时，它可以重新开始替换占位符字段

另外，如果任务缺少前一个任务设置的字段，我不希望前一个任务记录的值显示在当前查看的任务模式中

既然我已经解释了我的大部分JavaScript任务模式函数是如何工作的，我可以问一下我的问题了

我有一个任务字段，用于设置到期日期，我在其中显示到期日期

my DatePicker的库称为Zebra DatePicker，文档位于此处：

Zebra Datepicker GitHub页面如下：

在“方法”部分的文档页面底部附近有一个

destroy（）

方法，该方法说明：

destroy(): Removes the plugin from an element

因此，当我在我的应用程序中关闭一个任务模式时，我调用我的函数，在trun中，该函数下面还运行DatePicker元素上的

destroy（）

函数

问题是，我可以打开另一个任务模式，所有DOM值都将正确设置。但是，当我在DatePicker中选择一个值时，它会突出显示上一个任务模式中的旧值

显然DatePicker实例没有像它说的那样被销毁

我将非常感谢所有帮助销毁此文件，以便在启动新任务模式时重新开始。请帮忙

我还有一个运行在这里的JSFIDLE，它的库设置与我的应用程序类似，只是它没有打开和关闭模式。它只有一个DatePicker实例在运行。它可以用来试验

销毁

和

重新实例化

DatePicker插件的新实例

下面是我制作的两种方法的一些代码：

一种是在打开任务模式时，使用Zebra Datepicker插件实例化我的DueDate元素

另一种是在任务模式关闭时销毁它。这样，下次打开新任务模式时，可以再次实例化新任务模式

方法，在打开新任务模式时，在我的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();
    });
},

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

销毁方法以杀死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();
    });
},

// 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库的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();

---

在“设置到期日”中单击“签出”将不会打开日历，因为我在插件初始化后刚刚调用destroy。

我已经尝试了以下代码，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();

---

在“设置到期日”中单击“签出”将不会打开日历，因为我在插件初始化后刚刚调用了destroy。

Hi我更新了一个演示来显示问题。我看到它确实像你说的那样运行，但不能正常工作，我需要找到一个解决方案。。。如果您这样做1）将日期设置为2015-05-30 2）单击销毁日期选择器按钮3）单击日期范围，然后显示缺少日期选择器。4） 现在点击更新日期选择器至2015-05-24按钮，该按钮将设置跨度值，以获得新日期；5） 现在单击“构建新日期选择器”按钮6）现在单击日期范围再次显示日期选择器，您将看到选择的是原始的第30天，而不是新值24！关于如何解决这个问题有什么想法吗？嗨，我更新了一个演示来展示这个问题。我看到它确实像你说的那样运行，但不能正常工作，我需要找到一个解决方案。。。如果您这样做1）将日期设置为2015-05-30 2）单击销毁日期选择器按钮3）单击日期范围，然后显示缺少日期选择器。4） 现在点击更新日期选择器至2015-05-24按钮，该按钮将设置跨度值，以获得新日期；5） 现在单击“构建新日期选择器”按钮6）现在单击日期范围再次显示日期选择器，您将看到选择的是原始的第30天，而不是新值24！有没有办法解决这个问题？