从应用插件的元素中获取插件对象引用

Question

请看下面的代码。我使用了一个名为myPlugin的jquery插件，通过它来改变了#targetElement的ui界面。

var myPluginVar = $('#targetElement').myPlugin();

我创建了一个按钮并在上面添加了一个点击事件侦听器。

$('#myButton').click(function(){
    // HERE I want reference of myPlugin back.
}

现在我想通过按钮触发器获取myPlugin对象。 我不想使用myPluginVar。有没有办法使用应用插件的元素引用myPlugin。

- Durgpal Singh

---

简短回答是可以，但需要查看您的小部件代码以了解更多情况。您是想确定您的插件所用的 HTML 元素还是选择器？ - Twisty

欢迎贴出代码$('#myButton').click(function(){ var newref = $('#targetElement').myPlugin; //函数的引用 var newrefex = $('#targetElement').myPlugin(); } - Antoine Eskaros

这取决于你的代码。该插件可能正在元素中设置其属性。为什么不能使用全局变量 myPluginVar？ - shukshin.ivan

Answer 1

$.fn.myPlugin = function(){}会创建一个插件，可以像这样在元素上调用：$("#example").myPlugin();，这是您所知道的。 $.myPlugin = function(){}会创建一个插件，可以像这样静态地调用：$.myPlugin();。

因此，您所要做的就是每次调用$.fn.myPlugin时设置$.myPlugin，这样它将引用最后使用的元素。

$.fn.myPlugin = function(){
  this.text("Hello, world!");
  
  var t = this;
  
  $.myPlugin = function() {
    return t;
  }
};

$("#test").myPlugin();

$("#button").click(function(){
  $.myPlugin().text("something else");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
</div>
<button id="button">Click Me</button>

- Samuel Reid

Answer 2

这取决于您编写插件的方式。以下是基本插件示例：

(function($){
    $.fn.myPlugin = function(){
        return this.text('Iam is myPlugin');
    };
}(jQuery));

这个插件目前无法被引用，因为它没有将自己传递给任何东西。

但是，如果将插件代码更改为以下内容：

(function($){
    $.myPlugin = function(el){
        $(el).data('myPlugin', this);
        return $(el).text('Iam is myPlugin');
    };
    $.fn.myPlugin = function(){
        return new $.myPlugin(this);
    };
}(jQuery));

你可以使用自引用的插件来调用它：

$('#targetElement').data('myPlugin');

当插件从未在 #targetElement 上初始化时，它将返回 undefined。

但是，如果您使用以下方式初始化了 #targetElement：

$('#targetElement').myPlugin();

它将返回带有$.myPlugin对象的结果。

- Fal