jQuery插件范围问题

Question

在此jQuery插件中，我通过范围解析忽略了某些内容。 这是我要实现的简化示例：

(function($) {
    $.fn.dashboard = function(options) {
        this.onClick = function(e) {
            alert("do something");
            return false;
        };

        var createButton(parent) {
            //This should call the onClick method defined above when the link is clicked.
            var button = $('<a href="#">Reply</a>').click(this.onClick);
            parent.append(button);
        };

        return this.each(function() {
            var doc = $('body');
            createButton(doc);
        });
    };
})(jQuery);

问题是onClick永远不会被调用。 绝对是某种范围问题。

Answer 1

在插件内部， this指向jQuery对象。 您代码中的问题是this.onClick ，它刚刚向jQuery对象添加了新属性onClick 。

尝试这个。

(function($) {
    $.fn.dashboard = function(options) {
        var doSomething = function(){
            alert("do something");
            return false;
        };

        var createButton(parent) {
            parent.append($('<a href="#">Reply</a>').click(doSomething));
        };

        return this.each(function() {
            var doc = $('body');
            createButton(doc);
        });
    };
})(jQuery);

Answer 2

this将是一个jQuery对象包裹组匹配元件。 您可以遍历该集合并分配给onClick ，或者（更正确地说）您使用jQuery的click事件处理程序，而不是直接分配给onClick ：

$.fn.dashboard = function(options) {
    this.each(function () {
        $(this).click(function(e) {

        });
    });
}

您应该阅读jQuery页面Plugins / Authoring 。

Answer 3

在您的示例中，createButton方法中的“ this”实际上是指createButton函数本身，而不是传递给插件的jQuery集合。

要使此工作有效，只需在plugin方法中将“ this”分配给变量，然后在您的createButton（和其他）函数中使用该变量。

(function($) {
    $.fn.dashboard = function(options) {

        var $this = this;

        this.onClick = function(e) {
            alert("do something");
            return false;
        };

        var createButton = function(parent) {
            //This should call the onClick method defined above when the link is clicked.
            var button = $('<a href="#">Reply</a>').click($this.onClick);
            parent.append(button);
        };

        return this.each(function() {
            var doc = $('body');
            createButton(doc);
        });
    };
})(jQuery);

请注意 ，此答案仅涉及范围解析，实际上，正如该答案所提到的，您可能应该直接分配click函数。