javascript - 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

确定点击事件绑定(bind)的问题。

您需要在导航a上绑定(bind)点击事件，因为page1.php有导航菜单，因此内容是使用ajax加载的，但点击事件未绑定(bind)在新菜单项上。

因此创建名为 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;
         })
}

在页面加载和page1.php文件内容中调用BindClickEvent函数因此，每当您添加/删除菜单时，都会在ajax调用响应中调用BindClickEvent函数。