Jquery插件允许多个实例

时间:2014-08-06 05:30:25

标签: javascript jquery jquery-plugins html5boilerplate boilerplate

我正在使用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吗?

1 个答案:

答案 0 :(得分:0)

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

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