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

【问题标题】：Content Added by jQuery.prepend Isn't Clickable (even when triggered by .on)jQuery.prepend 添加的内容不可点击（即使由 .on 触发）
【发布时间】：2013-07-08 11:48:48
【问题描述】：

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

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

我知道存在“绑定”问题，因为我正在向 DOM 添加内容，所以我使用了 .on() 而不是 .click()，认为这将允许我的触发事件绑定到新创建的分区。我也尝试过 .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() 来解决。

谢谢。

【问题讨论】：

标签： jquery bind prepend event-delegation

【解决方案1】：

使用委托语法：

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

【讨论】：

完美。我想这毕竟是一个简单的语法错误。我一定是读错了 .on() 文档。我会让自己变得聪明，但感谢您提前给我答案。

【解决方案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);    
        }
    });
}

【讨论】：