销毁一个 jQuery 插件实例，以便它可以在插件销毁功能不起作用时再次重新实例化？

Question

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

我的任务模态框在 DOM 中为页面上的每个任务使用一个模态框。这意味着它不是为被点击的 50 个任务加载所有 HTML，而是为 1 个模态使用 HTML，并在每次任务模态为 "open" 时简单地替换任务数据和 "closed".

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

Modal 中我的大部分任务数据字段都使用名为 X-Editable 的库，这是一个 jQuery 在线编辑库。我还有其他库，如自定义滚动条、加载器、日期选择器等...

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

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

现在我已经解释了我的 JavaScript 任务模态的大部分功能，我可以提出我的问题了...

我有一个用于设置截止日期的任务字段，我在其中显示了截止日期。

我的 DatePicker 库名为 Zebra-Datepicker，文档位于此处：http://stefangabos.ro/jquery/zebra-datepicker/

Zebra-Datepicker GitHub 页面在这里：https://github.com/stefangabos/Zebra_Datepicker

在 "Methods" 部分的文档页面底部附近有一个 destroy() 方法，它说的是：

destroy(): Removes the plugin from an element

因此，当我在我的应用程序中关闭任务模式时，我调用了我的函数，该函数在 trun 中还在 DatePicker 元素上运行此 destroy() 函数。

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

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

我将非常感谢所有帮助销毁它的人，这样我就可以在启动新的任务模式时重新开始。请帮忙！

我这里也有一个 JSFIddle 运行 http://jsfiddle.net/jasondavis/Lqwfamoc/13/，它的库设置与我的应用程序类似，只是它没有模式打开和关闭的东西。它只有 1 个 DatePicker 实例运行。它可用于试验 destroying 和 re-instantiating DatePicker 插件的新实例。

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

一种是在打开任务模式时使用 Zebra-Datepicker 插件实例化我的 DueDate 元素。
另一种是在任务模态关闭时销毁它。以便下次打开新的Task Modal时可以再次实例化一个新的。

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

Destroy 方法杀死 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 lIbrary的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');

};

Answer 1

我试过下面的代码，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 中查看 Fiddle 点击设置截止日期将不会打开日历，因为我在插件初始化后立即调用 destroy。

销毁一个 jQuery 插件实例，以便它可以在插件销毁功能不起作用时再次重新实例化？

Destroy a jQuery Plugin Instance so that it can be re-instantiated again as plugins destroy function is not working?

javascript

jquery

datepicker