为什么在加载了一些内容后，jQuery丢失了'event'(单击)?

I am trying to load content with this next script when I select pages on the sidebar. This script works without problems:

当我在工具条上选择页面时，我正在尝试用下一个脚本加载内容。这个脚本没有问题:

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();
                        });

                    });

    }

This script works without probs and my HTML template looks something like this:

这个脚本没有任何问题，我的HTML模板看起来是这样的:

HTML Template

<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>

I've got a tag which is p#menu as an option to display or hide the sidebar. This works just until I load any page then I lose the click event.

我有一个标签是p#菜单作为显示或隐藏工具条的选项。这只在加载任何页面之后才会工作，这样就会丢失单击事件。

So basically my question is:

所以基本上我的问题是:

Why jQuery losses the event after change the content? I could solve this adding again again p#menu on loadContent functions, but I want to understand how jQuery works.

为什么jQuery在更改内容后丢失事件?我可以在loadContent函数上再次解决添加p#菜单的问题，但是我想了解jQuery是如何工作的。

Thanks!

谢谢!

1 个解决方案

#1

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

This will bind the event handlers to the DOM selector elements not only now, but also in future (selectors added to DOM after the bindings). Now the click event fires even the specific selectors are added or replaced with new DOM elements.

Read here for further info:
http://blog.revathskumar.com/2013/10/jquery-on-avoid-losing-event-binding-for-ajaxed-contents.html

这将不仅将事件处理程序绑定到DOM选择器元素，而且还将在将来将事件处理程序绑定到DOM选择器元素(在绑定之后添加到DOM的选择器)。现在，单击事件甚至会触发特定的选择器，并将其添加或替换为新的DOM元素。详情请点击这里:http://blog.revathskumar.com/2013/10/jquery-on- avoi-lo- event-binding-for ajaxed-contents.html

#1

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

秒客网

为什么在加载了一些内容后，jQuery丢失了'event'(单击)?

HTML Template

1 个解决方案

#1

#1

相关文章