Question

我有这个汉堡菜单，当我单击它时无法调用按钮onclick事件功能。

HTML代码：

<button class="nav-aside-close"><i class="fa fa-times"></i></button>

jQuery代码：

$('.nav-aside-close').on('click', function () {  
     console.log('test');  
     $('#nav-aside').removeClass('active');
     $('#nav').removeClass('shadow-active');
});

如果我单击汉堡菜单外的任何区域，则它可以工作。下面是有效的代码：

$(document).click(function(event) {
        if (!$(event.target).closest($('#nav-aside')).length) {
            if ($('#nav-aside').hasClass('active')) {
                $('#nav-aside').removeClass('active');
                $('#nav').removeClass('shadow-active');
            } else {
                if ($(event.target).closest('.aside-btn').length) {
                    $('#nav-aside').addClass('active');
                    $('#nav').addClass('shadow-active');
                }
            }
        }
    });

我已经在http://js.findingsteve.net上上传了实际代码

Answer 1

如果您使用的是Chrome，请打开DevTools（F12），然后在“控制台”选项卡上执行此操作，然后按 Enter ：

getEventListeners(document.querySelector('button.nav-aside-close'))

如果您看到任何click个事件已注册，则该事件应该起作用。

无论如何，我注意到您将main.js文件放到<head>上而不使用jQuery.ready，因此您的点击处理程序基本上不会被附加，因为DOM元素尚未准备好脚本执行的时间。

解决方案：

在JS文件的第一行上添加jQuery别名$，即shorthand for jQuery.ready BTW。

$(function($) {
    "use strict"

    // Fixed Nav
    var lastScrollTop = 0;

别忘了还从行尾删除jQuery函数分配，因为它不再是IIFE。

    setStickyPos();

})(jQuery);

替代，您可以将所有内容保持不变，并将main.js文件移动到<body>元素中，紧接在</body>标记之前。这与在其上方所有元素完成加载后执行脚本一样。

Answer 2

可能是因为.nav-aside-close隐藏在初始渲染中。

尝试以下方法：

$("#nav").on("click", ".nav-aside-close", function() {
  $("#nav-aside").removeClass("active");
  $("#nav").removeClass("shadow-active");
});

Answer 3

基于@Ana Liza Pandac评论

应该是：

$("#nav").on("click", "#nav-aside .nav-aside-close", function() {
  $("#nav-aside").removeClass("active");
  $("#nav").removeClass("shadow-active");
});

您的树是：nav-> nav-aside和obj具有类nav-aside-close

区别在于： $（“＃nav”）。on（“ click”，“＃ nav-aside .nav-aside-close”，function（）

无法从菜单触发关闭按钮单击事件

3 个答案:

解决方案：