jQuery动画后按钮丢失单击事件

我有一个问题，只有当我快速点击按钮时才会发生，我认为这与动画有关，但我不确定

这是滑出的DOM侧边菜单

页面上有一个汉堡菜单按钮。此按钮负责启动幻灯片菜单

<a class="btn-hamburger btn-ripple btn-menu" href="#">
    <i class="material-icons">menu</i>
</a>

---

出现的问题是汉堡包菜单不再触发点击事件。如果我缓慢地点击菜单，中间有停顿，它将一直工作。一旦我开始快速点击（快速滑出和滑入），汉堡菜单将不再触发事件。有趣的是，它总是在开始时的菜单按钮，因此这意味着当覆盖层可见且菜单不在时就不存在了。

我以前遇到过这个问题，我发现有效的解决方案是在.animate（）前面使用.stop（）

见本页：

---

这将阻止动画队列堆叠事件和被冲洗。

恐怕这不起作用。这让我很难过，因为DOM不会动态变化。覆盖以及幻灯片菜单从一开始就在DOm树中。为了以防万一，我还点击订阅了文档，但这对我来说是个谜。我甚至去掉了动画，只玩了$.css，得到了同样的结果。在多次快速点击后，我没有得到任何回应。调试器未命中事件。

<div class="side-menu-overlay hidden">
    <div class="side-menu">
        <div class="side-menu-header">
            <a class="btn-hamburger btn-ripple btn-menu" href="#">
                <i class="material-icons">menu</i>
            </a>
        </div>
    </div>
</div>

$(document).on('click', '.btn-menu', function (e) {
    if (sideMenuOverlay.hasClass('hidden')) {
        sideMenuOverlay.removeClass('hidden');
        sideMenuOverlay.animate({
            opacity: 1
        }, 200, function () {
            sideMenu.animate({
                 marginLeft: 0
            }, 250);
        });
    }
    else {
        sideMenu.animate({
            marginLeft: -240
        }, 200, function () {
            sideMenuOverlay.animate({
                opacity: 0
            }, 300, function () {
                sideMenuOverlay.addClass('hidden');
            });
        });
    }
});