d在一页上多个Ajax请求

Question

在我的索引页中，我有3个列，第一列显示数据库中的所有类别，第二列显示单击类别时的主题，第三列显示单击主题时选择的内容。

我在做什么是，当点击任何类别时，Ajax请求与该类别相关的所有主题的数据库，并将其显示在column1和It Works中，但是当我单击生成的主题以获取该内容时主题它无法异步请求，而是它带我到content.php。使其更清楚，我正在粘贴的index.php和的script.js（所有的JavaScript和jQuery文件被列入header.php文件）

索引页

<?php 
    include("tpl/header.php"); 
    ?> 
    <div id="navigation"> 
     <ul id="search_form"> 
      <?php 
      $cat = Category::find_all(); 
      foreach($cat as $category) { 
       echo '<li value="'; 
       echo $category->cat_id; 
       echo '" class="myLi" "><a href="subject.php?id='; 
       echo $category->cat_id; 
       echo'">'; 
       echo $category->category; 
       echo '</a></li>'; 
      } 
      ?> 
     </ul> 
    </div> 
    <div id="content1"> 
     <h2>Subjects</h2> 
     <!-- works --> 
    </div> 
    <div id="content2"> 
     <h2>Content</h2> 
     <!-- doesnt work --> 
    </div> 
    <?php 
     include_layout_template("footer.php"); 
    ?> 

的js代码

$(document).ready(function() { 
     $(".myLi").click(function(){ 
      var id = this.value; 
      ajax.open('get', 'subject.php?id=' + encodeURIComponent(id)); 
      ajax.onreadystatechange = function() { 
       // Pass it this request object: 
       handleResponse(ajax); 
      } 
      ajax.send(null); 
      return false; // So form isn't submitted. 
     }); 

     $(".myLi1").click(function(){ 
      var cid = this.value; 
      ajax.open('get', 'content.php?id=' + encodeURIComponent(cid)); 
      ajax.onreadystatechange = function() { 
       // Pass it this request object: 
       handleResponse1(ajax); 
      } 
      ajax.send(null); 
      return false; // So form isn't submitted. 
     }); 



     function handleResponse(ajax) { 
      // Check that the transaction is complete: 
      if (ajax.readyState == 4) { 
      // Check for a valid HTTP status code: 
      if ((ajax.status == 200) || (ajax.status == 304)) { 
       // Put the received response in the DOM: 
       var results = document.getElementById('content1'); 
       results.innerHTML = ajax.responseText; 
       // Make the results box visible: 
       results.style.display = 'block'; 
      } 
      } // End of readyState IF. 
     } // End of handleResponse() function. 

     function handleResponse1(ajax) { 
      // Check that the transaction is complete: 
      if (ajax.readyState == 4) { 
      // Check for a valid HTTP status code: 
      if ((ajax.status == 200) || (ajax.status == 304)) { 
       // Put the received response in the DOM: 
       var results1 = document.getElementById('content2'); 
       results1.innerHTML = ajax.responseText; 
       // Make the results box visible: 
       results1.style.display = 'block'; 
      } 
      } // End of readyState IF. 
     } // End of handleResponse() function. 

    }); 

..只有当我点击索引页面上的主题时，才会失败，当我导航到subject.php并单击链接时，它会异步提供结果。所以我的问题是我如何查询单个页面上的多个Ajax调用（即在我的情况下“index.php”）..任何帮助？

Answer 1

加载主题后，您应该对它们进行ajax化，但是当文档准备就绪时，即在它们存在之前，您正在对它们进行jjax化。您致电$(".myLi1")与任何内容不符。

另一种解决方案是将您的活动附加到所有匹配.myLi1的元素，或将来中的。 使用jQuery < 1.7，您可以使用delegate()方法执行此操作，否则使用on()方法。