Question

我有一个带有菜单锚点的HTML页面。获取内容的页面来自j Query load()的链接点击指定的网址。假设第一页的菜单链接为 Page2，Page3 点击 Page2 并通过j Query load（）加载内容; 加载的页面内容具有进一步的菜单锚链接第3页，索引。当我点击第3页 j Query load()时无效。表示内容未从其他链接加载。

为什么未来的其他链接无效

http://jsfiddle.net/naresh_kumar/prLN6/5/

代码的的index.html

 <html>
        <head>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <script>
                $(document).ready(function(){
                    $(".showMenu").on("click",function() {
                        $(".ulMenu").fadeIn().css({ 'display':'block'});
                    });

                    $('.ulMenu').mouseleave(function() {
                        $(this).fadeOut('slow').css({ 'display':'none'});
                    });

                    $('ul.ulMenu li a').on("click",function(e) {
                            e.preventDefault();
                            $("#container").load(this.href, function(){

                            }).hide().fadeIn('fast');
                            return false;
                        });
                })
            </script>
            <style>
                .ulMenu{ display:none;}
            </style>
        </head>
        <body>
            <div id='container'>
                <div id='mainPage'>
                    <div id='mainPageMenu'>
                        <ul class='showMenu'><li>Show menu</li></ul>
                        <ul id='mainPageMenuUl' class='ulMenu'>
                            <li class="menu"><a href='page2.html'>Page2</a></li>
                            <li class="menu"><a href='page3.html'>Page3</a></li>
                        </ul>
                    </div>
                    Main page Main page Main page Main page Main page Main
                </div>
            </div>

        </body>
    </html>

page2.html

<div id='page2'>
    <div id='page2Menu'>
        <ul class='showMenu'><li>Show menu</li></ul>
        <ul id='page2MenuUl' class='ulMenu'>
            <li class="menu"><a href='page3.html'>Page3</a></li>
            <li class="menu"><a href='index.html'>Main Page</a></li>
        </ul>
    </div>
    page 2 page 2 page 2 page 2 page 2 page 2 page 2  
</div>

page3.html

<div id='page3'>
    <div id='page3Menu'>
        <ul class='showMenu'><li>Show menu</li></ul>
            <ul id='page3MenuUl' class='ulMenu'>
                <li class="menu"><a href='page4.html'>Page4</a></li>
                <li class="menu"><a href='index.html'>main Page Menu</a></li>
            </ul>
    </div>
    page 3 page 3 page 3 page 3 page 3 page 3 page 3 page 3 
</div>

Answer 1

这是你的问题

$('ul.ulMenu li a').on("click", function (e) {
    e.preventDefault();
    $("#container").load(this.href, function () {   // you are replacing the html contents with the returned data
    }).hide().fadeIn('fast');
    return false;
});

由于它们是刚加载到DOM中的新元素，因此它们没有附加任何事件处理程序，因为它们在绑定时不存在。你需要做的是

委托给绑定时存在的父级，并且是静态的

由于您要加载到#container div中 - 您始终可以将其绑定到该元素

$("#container").on('click','.showMenu',function(){
     $(".ulMenu").fadeIn().css({ 'display':'block'});
});

$('#container').on('mouseleave','.ulMenu',function(){
     $(this).fadeOut('slow').css({ 'display':'none'});
});

$('#container').on('click','ul.ulMenu li a',function(e){
      e.preventDefault();
      $("#container").load(this.href, function(){

      }).hide().fadeIn('fast');
      return false;
});

或者在加载后将成功函数中的新事件处理程序绑定到元素

jQuery load（）不适用于将来的菜单锚点

1 个答案: