为什么加载某些内容时 jQuery 会丢失“事件”（点击）？答案

【问题标题】：Why jQuery loses 'event' (click) when some content has been loaded?为什么加载某些内容时 jQuery 会丢失“事件”（点击）？
【发布时间】：2013-06-13 04:25:23
【问题描述】：

当我在侧边栏选择页面时，我正在尝试使用下一个脚本加载内容。该脚本可以正常工作：

if(Modernizr.history) {     
    var newHash      = "",
        $wrapperTag = $("#main-content"),
        contentTag = '#main-content-inside',
        activeClass = 'active';
    
    $("#sidebar").delegate("a", "click", function() {
        _link = $(this).attr("href");
        history.pushState(null, null, _link);

        loadContent(_link);
        return false;
    });

    function loadContent(href){
        
        $wrapperTag
                .find(contentTag)
                $wrapperTag.load(href + " "+contentTag+" ", function(response, status, xhr) {

                        $("#sidebar a").removeClass(activeClass);
                        $('#sidebar a[href$="'+href+'"]').addClass(activeClass);
                        
                        $("#menu").bind('click',function(){
                            $(this).showSidebar();
                        });

                    });
        
    }

这个脚本没有问题，我的 HTML 模板看起来像这样：

HTML 模板

<div id="sidebar">
    <nav>
        <ul class="ul-vert">
            <li><a href="page1.html">Page 1</a></li>
            <li><a href="page2.html">Page 2</a></li>
            ...
            <li><a href="pageN.html">Page N</a></li>
        </ul>
    </nav>
 </div>

 <div id="main-content">
     <div id="main-content-inside">
         <p id="menu">Show / Hide Sidebar</p>
        <div class="text desc">(Content)</div>  
     </div>
 </div>

我有一个标签 p#menu 作为显示或隐藏侧边栏的选项。这只是直到我加载任何页面然后我失去了 click 事件。

所以基本上我的问题是：

为什么jQuery在更改内容后会丢失事件？我可以在 loadContent 函数上再次添加 p#menu 来解决这个问题，但我想了解 jQuery 的工作原理。

谢谢！

【问题讨论】：

您正在丢失p#menu 的点击事件，对吗？这就是您在load 完成后绑定点击事件的原因吗？
元素上存在点击事件。当该元素被移除/替换时，点击事件将不再存在。
没错。由于您替换了main-content 的内容；而p#menu 本身就是它的一部分，它上面的所有事件（以及main-content 中的任何元素）都将丢失。
当我再次绑定 p#menu 时，正在下一页中工作。每个页面都有 p#menu 和 div.text.desc 内的内容作为基本结构。但我认为它失去了内容本身！

标签： jquery html events load

【解决方案1】：

$('.fatherDiv').on('click','.childDiv', {} ,function(e){
 //insert your code here
})

这将事件处理程序绑定到 DOM 选择器元素，不仅现在，而且在将来（绑定后添加到 DOM 的选择器）。现在，即使特定的选择器被添加或替换为新的 DOM 元素，也会触发 click 事件。

阅读此处了解更多信息：
http://blog.revathskumar.com/2013/10/jquery-on-avoid-losing-event-binding-for-ajaxed-contents.html

【讨论】：