0

我有一个HTML带有菜单锚的页面。获取内容的页面来自j Query load()指定 url 的链接点击。假设第一页有菜单链接为 Page2，Page3 点击Page2并通过j Queryload()加载内容；加载的页面内容具有进一步的菜单锚链接page3, index。当我点击page3 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>
4

1 回答 1

2

这是你的问题

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

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

于 2013-03-13T18:38:03.480 回答