jQuery插件允许多个实例

Question

我正在使用 jQuery boilerplate template 作为我正在编写的插件。它基本上只是运行一个 ajax 调用并替换它运行的元素的内容。示例：

我的插件名称是'getContent'

$('.container').getContent({
    html : 'foo'
});

非常简化的插件版本，但是在模板的最底部有这样的：

// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations

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

    // chain jQuery functions
    return this;
};

显然，它会检查 pluginName 是否已经绑定到元素。在这种情况下，当您稍后在同一页面实例中再次尝试执行此操作时，该插件不会运行。

解决我的问题的正确方法是从字面上删除 new Plugin 部分周围的 if 吗？

Answer 1

为了能够为多个实例运行插件，您需要为每个实例创建一个新的闭包，请尝试以下代码：

function getContentFunc(elem,options){
    //things you want your plugin to do
};

$.fn[pluginName] = function(options) {
    if ($.data(this, "plugin_" + pluginName)) return;
    return $(this).each(function() {
        getContentFunc(this,options);
        $.data(this, "plugin_" + pluginName);
    });
};

看一个很简单的插件，用同样的方法完成HERE