Ajax帮助加载内容

Question

Hi I got a problem while using this code (which is in a js named ajax.js)

    $(function(){
      $("#loading").hide();

         $("ul#nav a").click(function(){
            page = "content/"+$(this).attr('href')

            $("#loading").ajaxStart(function(){
               $(this).show()
               })
            $("#loading").ajaxStop(function(){
               $(this).hide();

            })

            $(".content").load(page);
            return false;
         })
     })

On the index.php first on the head division I include the scripts

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>

And on body division,this is the main menu navigation

<ul id="nav">
  <li><a href="page1.php">Here 1</a></li>
  <li><a href="page2.php">Here 2 </a></li>
</ul>

And here is the code where the content is loaded

<div class="content">
  <img src="imgs/ajax-loader.gif" width="16" height="16" alt="Loading..." id="loading" />
  <?php include('content/page1.php'); ?>
</div>

This code is working perfectly.But my problem is that inside page1.php I got

<ul id="nav">
  <li><a href="page3.php">Here 3 </a></li>
  <li><a href="page4.php">Here 4 </a></li>
</ul>

and the whole system is not working properly. If i use the links from the main navigation bar its ok but if i try to use links from any of the other pages its not working. I tried to load the ajax script on every page.php but still is not working. Any ideas?

Answer 1

OK the issue with the click event binding.

You need to bind the click event on nav a because of the page1.php have nav menu so the content is loaded using the ajax but click event is not bind on new menu item.

So create new function called BindClickEvent

function BindClickEvent(){
        $("ul#nav a").unbind( "click" );
        $("ul#nav a").bind("click", function(){
            page = "content/"+$(this).attr('href')

            $("#loading").ajaxStart(function(){
               $(this).show()
               })
            $("#loading").ajaxStop(function(){
               $(this).hide();

            })

            $(".content").load(page);
            return false;
         })
}

call BindClickEvent function in page load and page1.php file content also So whenever you will add / remove menu call BindClickEvent function in ajax call response.

Answer 2

It is the issue of delegated function, just replace

$("ul#nav a").click(function(){

with

$(document).on('click', 'ul#nav a', function(){

your problem will be solved :)