Question

因此，一旦我的插件被调用，我就会添加一个输入字段，即

function myPlugin ( element, options ) {
        this.element = element;
        this.settings = $.extend({}, $.fn.myPlugin.defaults, options );
        this.init();
        this.setUpSearchField()
}

// Avoid Plugin.prototype conflicts
$.extend(myPlugin.prototype, {
        init: function () {
            if ($.isFunction(this.settings.onInit())) {
                this.settings.onInit();
            }
        },
        setUpSearchField: function () {
        //Adding Input Field to Div
        var self = this;
        this.$searchField = $("<input/>", {
            id: 'control'
        })
        .appendTo(this.element)
        .focus(function () {
            self.$searchField.val("");
        })
        }
});

当我设置.focus时，我的问题是有效的代码

self.$searchField.val("");

但如果我最初尝试

this.$searchField.val("");

我收到一条错误说'this。$ searchField未定义。如果有人能解释，我不明白这种情况的区别吗？

Answer 1

this块中的

$.extend将引用参数中的对象，而this事件处理程序中的focus将引用引发事件的元素处理程序。

要停止它们之间的歧义，在父对象this中将存储到self变量，以便可以在事件处理程序中引用它。

举例说明：

$.extend(myPlugin.prototype, {
    // this = the object
    var self = this;

    $('#foo').focus(function () {
        // this = the #foo element
        // self = the object
    });
});

Jquery插件动态添加输入字段，什么是自我与此

1 个答案: