jQuery 点击事件不会解除绑定

Question

我有一个导航，我想在单击按钮时打开它。当导航打开并且用户在导航外部单击时，我希望它关闭。我以为很容易...

我尝试通过首先在按钮上点击事件来打开导航来实现这一点。然后我在触发 closeNav 方法的文档上添加了一个新的点击事件。

到目前为止屁股还好。有用。但是我的点击事件堆积如山。每次打开导航时，都会添加一个新的文档点击事件。所以我添加了一个关闭点击来删除之前添加的点击事件。也尝试使用 unbind 得到相同的结果。

我猜这与处理程序有关，因为我使用 this.closeNav.bind(this)。但是我不知道...

有什么想法吗？

headerNavigation.prototype.init = function()
{
    // Add on click event on the button that triggers toggleNavigation
    $(this.navBtn).on('click', this.toggleNavigation.bind(this));
}

headerNavigation.prototype.toggleNavigation = function(e)
{
    e.stopPropagation();
    $(this.nav).slideToggle(200);
    // Add an on click for document that triggers this.closeNav
    $(document).on('click', this.closeNav.bind(this)); 
}

headerNavigation.prototype.closeNav = function(e)
{
    console.log($(document).data('events'));
    $(this.nav).slideUp(200);
    // Now remove the on click event for document so we do not stack up on these
    $(document).off('click', this.closeNav.bind(this)); 
}

Answer 1

Bind 会在您每次调用时创建新函数。

试试这个：

headerNavigation.prototype.toggleNavigation = function(e)
{
    e.stopPropagation();
    $(this.nav).slideToggle(200);
    // Add an on click for document that triggers this.closeNav
    this._binder = this.closeNav.bind(this);
    $(document).on('click', this._binder); 
}

headerNavigation.prototype.closeNav = function(e)
{
    console.log($(document).data('events'));
    $(this.nav).slideUp(200);
    // Now remove the on click event for document so we do not stack up on these
    $(document).off('click', this._binder); 
}

jQuery 点击事件不会解除绑定

jQuery click event won't unbind

javascript

jquery

event-handling

javascript-events