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()方法。