jQuery load() not working for further future menu anchor

StackOverflow https://stackoverflow.com/questions/15393478

  •  23-03-2022
  •  | 
  •  

Question

I have a HTML page with menu anchor. The page getting content is from link click via j Query load() for specified url. Suppose first page have menu links as Page2, Page3 click on Page2 and content load via j Query load(); The loaded page content having further menu anchor links page3 , index. When i am clicking on page3 j Query load() is not working. means content is not loading from further link.

why the further future link is not working

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

Code 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>
Was it helpful?

Solution

Here's your problem

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

Since they are new elements just loaded into the DOM, they don't have any event handlers attached to them because they did not exist at the time of binding. What you would have to do is

Delegate to a parent that exists at the time of binding and will be static

Since you are loading into the #container div - you can always bind it to that element

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

Or bind new event handlers in the success function to the elements after they are loaded

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top