Ajax幫助加載內容

Question

嗨，我在使用此代碼時遇到問題（在名為ajax.js的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;
         })
     })

在index.php上，首先在頭部分添加腳本

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

在身體分割上，這是主菜單導航

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

這是加載內容的代碼

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

這段代碼運行正常。但是我的問題是在page1.php里面

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

並且整個系統無法正常運行。 如果我使用主導航欄中的鏈接，可以，但是如果我嘗試使用其他任何頁面上的鏈接，則無法正常工作。 我試圖在每個page.php上加載ajax腳本，但仍然無法正常工作。 有任何想法嗎？

Answer 1

單擊與單擊事件綁定有關的問題。

您需要在nav a上綁定click事件，因為page1.php具有nav菜單，因此使用ajax加載了內容，但是click事件未綁定到新菜單項上。

因此，創建名為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;
         })
}

BindClickEvent可以在頁面加載和page1.php文件內容中調用BindClickEvent函數，因此，每當您要添加/刪除菜單時，都可以在ajax調用響應中調用BindClickEvent函數。

Answer 2

這是委托函數的問題，只需替換

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

與

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

您的問題將得到解決:)