javascript - 在 Jquery 模式“轻量级”中限定 this

Question

我希望你能理解我的英语。

我尝试使用 Jquery 模式“轻量级”（http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/）

但是我对调用方法和这个范围有一个问题。

我在表上绑定插件：

    $("#tableSurface0").flexTab();
    $("#tableSurface1").flexTab();

我的 Jquery 插件：

;(function ( $, window, document, undefined ) {


    var pluginName = 'flexTab',
        defaults = {
            wrapOverflowHeight : true
        };

    // The actual plugin constructor
    function Plugin( element, options ) {
        this.element = element;

        this.options = $.extend( {}, defaults, options) ;

        this.init();
    }

    Plugin.prototype.init = function () {
        $("th:not([noflex])", this.element).on("mousedown", menuContextuel);
    };

    menuContextuel = function(event)
    {
        //BUG
        console.log( ?? ); // show this.element of constructor
    }

    // A really lightweight plugin wrapper around the constructor, 
    // preventing against multiple instantiations
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, 
                new Plugin( this, options ));
            }
        });
    }

})( jQuery, window, document );

所以我不能在 menuContextuel 函数中调用 this.element 而不在事件处理程序中添加数据：

Plugin.prototype.init = function () {
    $("th:not([noflex])", this.element).on("mousedown", { table:this.element }, menuContextuel);
};
...
menuContextuel = function(event)
{
   console.log( event.data.table );
}

那里 - 他有另一个解决方案？

谢谢

Answer 1

这是因为正在调用该函数，而“this”是被单击的元素。使用可以使用jQuery 的代理，所以保持你所追求的“this”的范围。

$("th:not([noflex])", this.element).on("mousedown", $.proxy(menuContextuel,this));