jQuery動態使用Ajax創建節點

在這裏，我動態地創建了一個jQuery'手風琴'列表併爲手風琴內的每個'p'部分分配'id'（請參閱以「$ .get（」/ DataPage.aspx「，.......「），問題是我無法通過鼠標單擊來檢索每個'p'的'id'，當我用靜態數據生成手風琴時，它正在工作。「T找出問題是否正在與$獲得（）或別的東西。jQuery動態使用Ajax創建節點

 <html> 
     <head> 
      <title>Start Here</title> 
      <link rel="stylesheet" type="text/css" href="css/mycss.css"/> 
      <script type="text/javascript" src="jquery-1.9.1.min.js"></script> 
      <script type="text/javascript" src="jquery-ui.custom.js"></script>  
      <link rel="stylesheet" type="text/css" href="jquery-ui-1.10.2.custom.css" /> 

     </head> 
     <body> 
      <div id="HeaderDiv" style="overflow:scroll">Product Listing</div> 
      <div id="ParentContainer"> 
       <div id="ParentDiv" class="container" style="max-width:300px;"></div> 
       <div class="container" style="max-width:900px;min-height:600px; background-      color:azure;">    
       </div> 
      </div> 



     <script type="text/javascript"> 
     $(document).ready(function() {    
     $.get("/DataPage.aspx", { "type": "category" }, function (data) { 
      /* 'data' is just a string with words separated by '#' character */ 
      var str = "";     
      var strarray = data.split("#"); 
      var len = strarray.length;     
      for (var i = 0; i < len; ++i) {         
       $("#ParentDiv").append('<p id="' + strarray[i] + '">' + strarray[i] + '</p>' + '<div id="div' + strarray[i] + '"><h6>something</h6></div>'); 
       str += strarray[i]; 
      } 
      alert(str); 
      $("#ParentDiv").accordion({ 
       collapsible: true, active: false, heightStyle: "content" 
      }); 
     });    

     $("*", document.body).click(function (e) { 
      e.stopPropagation(); 
      var domElem = $(this).get(0); 
      $("#HeaderDiv").text(domElem.getAttribute("id")); 
     }); 
    }); 
    </script> 
    </body> 
    </html>

來源

2013-04-22 user2305981

這是當你使用異步Ajax調用，你得到了‘臭名昭著’的賽車條件。

記住這個：$.get()將開始，然後將運行「在後臺」，而你的Javascript代碼的其餘部分仍在繼續。所以click()處理器的結合會發生before新的元素將在$.get

解決方案的回調插入：移動click()處理器的結合的$.get

$(document).ready(function() {    
    $.get("/DataPage.aspx", { "type": "category" }, function (data) { 
     /* 'data' is just a string with words separated by '#' character */ 
     var str = "";     
     var strarray = data.split("#"); 
     var len = strarray.length;     
     for (var i = 0; i < len; ++i) {         
      $("#ParentDiv").append('<p id="' + strarray[i] + '">' + strarray[i] + '</p>' + '<div id="div' + strarray[i] + '"><h6>something</h6></div>'); 
      str += strarray[i]; 
     } 
     alert(str); 
     $("#ParentDiv").accordion({ 
      collapsible: true, active: false, heightStyle: "content" 
     }); 
     $("*", document.body).click(function (e) { 
      e.stopPropagation(); 
      var domElem = $(this).get(0); 
      $("#HeaderDiv").text(domElem.getAttribute("id")); 
     }); 
    });    

});

來源

2013-04-22 06:02:01 devnull69

非常感謝回調裏面。有效。 – user2305981 2013-04-22 06:10:02

jQuery動態使用Ajax創建節點

回答

相關問題