自定义jQuery插件使用错误-<；公共职能>；这不是一个函数

我编写了一个jQuery插件，如下所示：

jQuery(function($) {
  $.fn.myPlugin = function() {
    return this.each(function () {
      this.publicFunction = function() {
        alert('test');
      };

      return this;
    });
  };
});

  var myPluginDiv = $("#divTest").myPlugin();
  myPluginDiv.publicFunction();

var myPluginDiv = $("#divTest").myPlugin().get(0);

我的HTML页面上的JavaScript如下所示：

jQuery(function($) {
  $.fn.myPlugin = function() {
    return this.each(function () {
      this.publicFunction = function() {
        alert('test');
      };

      return this;
    });
  };
});

  var myPluginDiv = $("#divTest").myPlugin();
  myPluginDiv.publicFunction();

var myPluginDiv = $("#divTest").myPlugin().get(0);

---

我得到的错误是“myPluginDiv.addItem不是一个函数”，它显然是一个公共函数。为什么它不工作？

您将函数添加到DOM元素，而不是返回的jQuery对象

myPluginDiv

是一个jQuery对象。我认为以下任何一项都可以：

应用于返回的jQuery对象：

jQuery(function($) { 
  $.fn.myPlugin = function() { 
      this.publicFunction = function() {
          alert('test');
      }
      return this;
  };
});

var a = $('selector').myPlugin();
a.publicFunction();

或如原始问题中所述应用于DOM对象：

myDivPlugin.get(0).publicFunction();

或

---

明白了！我知道我以前有过这个问题，只是不记得我做了什么来解决它。关键是在我的插件调用结束时使用

.get（0）

，如下所示：

jQuery(function($) {
  $.fn.myPlugin = function() {
    return this.each(function () {
      this.publicFunction = function() {
        alert('test');
      };

      return this;
    });
  };
});

  var myPluginDiv = $("#divTest").myPlugin();
  myPluginDiv.publicFunction();

var myPluginDiv = $("#divTest").myPlugin().get(0);

---

然后我可以调用

myPluginDiv.publicFunction（）

，没有问题。

好吧，您的第一个解决方案不起作用。看起来你的推理是合理的，但当我尝试时，它不起作用。然而，第二种解决办法奏效了。.get（0）是关键。仔细查看了代码。现在的问题是，它将函数添加到迭代的每个元素，而不是返回的jQuery对象。我将添加几个不同的（固定的）备选方案。