通过$ .proxy（）将类方法绑定到Click事件

Question

我在这里阅读了有关此主题的另一篇文章，并尝试了解决方案（使用$ .proxy（）），但是它无法按我的代码预期的那样工作。 它仅在页面加载后立即执行，并且在单击元素时不会触发click事件。

/**
 * menu-slider.js
 * Written by: Jay Simons
 * Cloudulus.Media (https://code.cloudulus.media)
 */
class menuSlider
{
    constructor(id, maxWidth)
    {
        this.id = id;
        this.ele = $("#"+id);
        this.maxWidth = maxWidth;
        this.menuWidth = this.ele.width();
        this.winWidth = $(document).width();

        this.calc();
        $(window).resize(this.calc());
    }

    calc()
    {
        this.menuWidth = this.ele.width();
        this.winWidth = $(document).width();

        if (this.winWidth <= this.maxWidth)
        {
            this.ele.css("margin-right", -this.menuWidth+"px");
            this.ele.append('<div id="menu-slider-btn"><i class="fas fa-bars"></i></div>');
            $("#menu-slider-btn").css('position', 'absolute').css('top', 0).css('left', -$("#menu-slider-btn").width()+'px')
                .css("box-shadow", "none").css('color', 'white');
            $("#menu-slider-btn").click($.proxy(this.toggle(), this));
        }
    }

    toggle()
    {
        if(this.ele.css("margin-right") == -this.menuWidth+"px" && !this.ele.is(':animated'))
        {
            this.ele.show();
            this.ele.animate({"margin-right": '+='+this.menuWidth}).addClass("active");
        }
        else
        {
          if(!this.ele.is(':animated'))
          {
              this.ele.animate({"margin-right": '-='+this.menuWidth}).removeClass("active");
          }
        }
    }
}

Answer 1

您正在调用成员函数并传递其返回值，而不是将其传递给事件处理程序。 更改这些：

$(window).resize(this.calc());
$("#menu-slider-btn").click($.proxy(this.toggle(), this));

对于这些：

$(window).resize($.proxy(this.calc, this));
$("#menu-slider-btn").click($.proxy(this.toggle, this));

Answer 2

我认为您通过在this.toggle上添加()来调用$.proxy()的this.toggle 。 你必须写这样的东西。

$("#menu-slider-btn").click($.proxy(this.toggle, this));

我建议您必须在类似这样的变量中声明匿名函数

/**
 * menu-slider.js
 * Written by: Jay Simons
 * Cloudulus.Media (https://code.cloudulus.media)
 */
class menuSlider
{
    constructor(id, maxWidth)
    {
        this.id = id;
        this.ele = $("#"+id);
        this.maxWidth = maxWidth;
        this.menuWidth = this.ele.width();
        this.winWidth = $(document).width();
        this.calc();
        $(window).resize(this.calc);
    }

    this.calc = function(){        {
        this.menuWidth = this.ele.width();
        this.winWidth = $(document).width();

        if (this.winWidth <= this.maxWidth)
        {
            this.ele.css("margin-right", -this.menuWidth+"px");
            this.ele.append('<div id="menu-slider-btn"><i class="fas fa-bars"></i></div>');
            $("#menu-slider-btn").css('position', 'absolute').css('top', 0).css('left', -$("#menu-slider-btn").width()+'px')
                .css("box-shadow", "none").css('color', 'white');
            $("#menu-slider-btn").click($.proxy(this.toggle, this));
        }
    };

    this.toggle = function(){
        if(this.ele.css("margin-right") == -this.menuWidth+"px" && !this.ele.is(':animated'))
        {
            this.ele.show();
            this.ele.animate({"margin-right": '+='+this.menuWidth}).addClass("active");
        }
        else
        {
          if(!this.ele.is(':animated'))
          {
              this.ele.animate({"margin-right": '-='+this.menuWidth}).removeClass("active");
          }
        }
    };
}