销毁后无法重新实例化 jQuery 插件

Posted 2023-05-09

【中文标题】销毁后无法重新实例化 jQuery 插件

【英文标题】：Cannot reinstantiate jQuery plugin after destroy

【发布时间】：2020-05-05 00:53:06

【问题描述】：

我正在制作自己的 jquery 插件，但在销毁插件后无法重新启动它。为了清楚起见，我已将代码简化为基础。我尝试对此进行了很多研究，但似乎每个人都以截然不同的方式创建这些插件。我用作参考的样板在这里https://github.com/jquery-boilerplate/jquery-boilerplate/blob/master/src/jquery.boilerplate.js

当我单击初始化按钮时，文本变为红色。然后按下销毁按钮使文本变黑。但是再次按 init 不会使文本变为红色。

<div id="banner-message">
  <p>Hello World</p>
  <button class="init">init</button>
  <button class="destroy">destroy</button>
</div>

;(function ($, window, document, undefined) 

  "use strict";

  let pluginName = "myPlugin",
      defaults = 
        color: 'red',
      ;

  function Plugin(element, options) 

    this.element = element;

    this.settings = $.extend(, defaults, options);
    this._defaults = defaults;
    this._name = pluginName;

    this.wrapper = '';
    this.text = '';

    this.init();
  


  $.extend(Plugin.prototype, 

    init: function () 
      let o = this.settings;

      this.wrapper = $(this.element);
      this.text = this.wrapper.find('p');

      this.text.css('color', o.color)
    ,

  );

  $.fn.destroy = function() 
    return this.each(function () 

      let plugin = $.data(this, "plugin_" + pluginName);
      plugin.text.css('color', 'black')

    )

  ;

  $.fn[pluginName] = function (options) 
    return this.each(function () 
      if (!$.data(this, "plugin_" + pluginName)) 
        $.data(this, "plugin_" +
               pluginName, new Plugin(this, options));
      
    );
  ;

)(jQuery, window, document);




$(document).ready(function () 

  let x = '';

  $(document).on("click", ".init", function () 
    x = $('#banner-message').myPlugin();
  );

  $(document).on("click", ".destroy", function () 
    x.destroy()
  );


);

【参考方案1】：

我想通了。我需要在destroy方法中添加这个

   $(this).removeData('plugin_' + pluginName);