Question

您好我在使用此代码时遇到了问题（在js中名为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;
         })
     })

首先在head division上的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

确定click事件绑定的问题。

您需要在nav a上绑定click事件，因为page1.php具有导航菜单，因此使用ajax加载内容但是新菜单项上没有click事件。

因此，创建名为BindClickEvent的新函数

StringBuilder[] names = { new StringBuilder().append ("Peter"), new StringBuilder().append ("Paul"), new StringBuilder().append ("Mary") };
List<Runnable> runners = new ArrayList<>();

for (StringBuilder name : names){
  runners.add(() -> System.out.println(name));
  name.setLength (0);
  name.append ("Mary");
}

for (int k=0; k<runners.size(); k++){
  runners.get(k).run();
}

在页面加载和page1.php文件内容中调用Mary Mary Mary函数所以每当你在ajax调用响应中添加/删除菜单调用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; }) }时。

Answer 2

这是委托功能的问题，只需替换

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

带

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

你的问题将得到解决:)

Ajax有助于加载内容

2 个答案: