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将成为包装匹配元素的 set 的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集合。

要使其工作，只需将'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);

注意此答案仅涉及范围解析，事实上，正如this answer所提到的，您应该直接指定点击功能。

jQuery插件范围问题

3 个答案: