无法找到自定义jQuery插件

时间:2015-02-11 12:24:37

标签: javascript jquery jquery-plugins

我在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建议的。

1 个答案:

答案 0 :(得分:3)



(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>
&#13;
&#13;
&#13;

您使用fn快捷方式(prototype)扩展了jQuery对象。所以你需要将你的插件称为jQuery方法:

$.myPlugin.sayHello();

更新

从我的代码中看到,如果你想调用sayHello函数,你需要在某个元素上初始化它,例如:

$( 'body' ).myPlugin();

然后调用你的方法:

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

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