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页面Plugin/Authoring。

Answer 3

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

要做到这一点，只需将"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);

注意这个答案只涉及范围解析，事实上，正如这个答案所提到的，您可能应该直接分配单击功能。