Question

感谢您的帮助。这个网站是一个很好的资源。

我的问题：当我正在处理的网站上打开一个菜单时，我还会在（正文）前面添加一个div叠加层，并给它一个类，允许它可以点击以关闭菜单并自行删除。这样，用户可以单击菜单外的任何位置来关闭它，而不是要求他们单击“关闭”按钮。这听起来很简单，但我无法让它发挥作用。

我知道存在“绑定”问题，因为我正在向DOM添加内容，所以我使用.on（）而不是.click（），认为这会允许我的触发事件绑定到新创建的DIV。我也试过.bind（），老实说，我只是在这一点上进行代码猜测，因为我不明白它们之间的区别。我不想使用插件看起来那么简单，所以我希望有一些容易出错的错误，对于那些有经验的人，即你们所有人来说，这些错误会立即显现出来。 ;）这是我的jQuery函数。一切都像我想要的那样，只要点击“＃the-overlay”就什么都不做。

    $('.the-toggle').on("click", function(){
    $(".the-menu").slideToggle();
    $(".icon-chevron-sign-down").toggleClass("icon-rotate-180");

    if ($('#the-overlay').length) {
        $('#the-overlay').remove();
    }
    else {
        var content = '<div id="the-overlay" class="the-toggle"></div>';
        $('body').prepend(content);

        var docHeight = $(document).height();
        $("#the-overlay").height(docHeight);    
    }
});

如果我的问题以某种方式违反规则，请原谅。我确实找到了一个避免重复的答案，但我能找到的所有答案都表明我的问题可以通过.on（）或弃用的.live（）来解决。

谢谢。

Answer 1

使用委托语法：

$(document.body).on("click",'.the-toggle', function(){...});

Answer 2

请使用以下代码替换您的代码。它会起作用。

$(document).ready(function(e) {
    theToggle();
});
function theToggle(){
    $('.the-toggle').on("click", function(){
        $(".the-menu").slideToggle();
        $(".icon-chevron-sign-down").toggleClass("icon-rotate-180");

        if ($('#the-overlay').length) {
            $('#the-overlay').remove();
        }
        else {
            var content = '<div id="the-overlay" class="the-toggle"></div>';
            theToggle();
            $('body').prepend(content);             
            var docHeight = $(document).height();
            $("#the-overlay").height(docHeight);    
        }
    });
}

jQuery.prepend添加的内容不可点击（即使由.on触发）

2 个答案: