Question

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

我尝试使用Jquery模式“Lighrweight”（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's proxy，因此请保持您所追求的“此”的范围。

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

在Jquery模式“轻量级”范围内

1 个答案: