找不到自定义jQuery插件

Unable to find custom jQuery plugin

本文关键字：插件 jQuery 自定义 找不到      更新时间：2023-10-03

我在myPlugin.js中开发了一个jQuery插件，如下所示：

(function ($) {
    $.fn.myPlugin = function (options) {
        var defaults = {};
        var settings = $.extend(defaults, options);
        return this.each(function () {
            this.sayHello = function () {
                alert('Hello!');
            };
        });
    };
})(jQuery);

我从另一个文件call.js调用sayHello()方法，如下所示：

myPlugin.sayHello();

myPlugin.js和call.js都包含在我的HTML文件中。当编译器到达行myPlugin.sayHello();时，它报告一个错误Uncaught ReferenceError: myPlugin is not defined。

我的代码有什么问题？

更新

我找到了一个解决方案。我在一个地方的代码中初始化了一个特定元素上的插件，例如$('#someElement').myPlugin();。我只需要用someElement.sayHello();调用一个插件函数就可以了。

另一个解决方案是@antyrat建议的。

(function ($) {
    $.fn.myPlugin = function (options) {
        var defaults = {};
        var settings = $.extend(defaults, options);
        return this.each(function () {
            this.sayHello = function () {
                alert('Hello!');
            };
        });
    };
})(jQuery);
$( 'body' ).myPlugin();
console.log($( 'body' ))
$( 'body' )[0].sayHello();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

您已经使用fn快捷方式（prototype）扩展了jQuery对象。因此，您需要将插件调用为jQuery方法：

$.myPlugin.sayHello();

更新

根据我从您的代码中看到的，如果您想调用sayHello函数，您需要在一些元素上初始化它，例如：

$( 'body' ).myPlugin();

然后调用您的方法：

$( 'body' )[0].sayHello();

因为this.sayHello = function () {，我们需要[0]引用DOM元素，而不是jQuery

相关文章：