Ajax調用，請參閱visualy的元素，但Javascript不會看到它們

我真的很感謝你的幫助，因爲我一直在反覆觀察，完全迷失在可能出錯的地方。Ajax調用，請參閱visualy的元素，但Javascript不會看到它們

我有一個Ajax調用Web服務，並從這個調用我建立一些HTML結構。到目前爲止，一切都很好，數據被拉下來，我可以直觀地看到結構。

但是，隨着我的代碼的繼續，我嘗試稍後閱讀這些元素進行一些更多操作，JavaScript根本沒有看到它們，並且元素數量爲零。

該項目的一些相關代碼。首先運行，基本上這個函數建立必要的HTML一塊

   $.ajax({ 
        type: "POST", 
        url: "HistoryEventsWebService.asmx/getEventsData", 
        data: event_types, 
        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        success: function (result) { //on success     
         var results = result.d; 

         $('#insidediv_container').empty(); 

         for (var i = 0; i < results.length; i++) { 
          var insidediv = ''; 
          insidediv += '<div class="insidediv">'; 
          insidediv += '<span class="month">' + results[i].month + '</span><span class="day">' + results[i].day + '</span><span class="year">' + results[i].year + '</span>'; 
          insidediv += '<div class="header"><span>Jan 08, 2010 - event one</span> </div>'; 
          insidediv += '<div class="contentdiv">' + results[i].event_desc + '</div>'; 
          insidediv += '</div>'; 

          $('#insidediv_container').append(insidediv);   
         } 
        } 
       }); 
       return false;

右鍵這個上功能完成後，我的代碼是繼續下一個功能，而這也正是我有我的問題！

var currentbox = 0; 
      var current_box_old = 0; 
      var box_size = ($('.insidediv').width() + 1).toString(); 
      var box_count = $('.container2 > div > div').length - 1; 

      //console.log(box_count); 
      var min_range = 0; 

      setScale(); //making slider visual elements 

      //slider code 
      $("#slider").slider({ 
       min: min_range, 
       max: box_count, 
       value: 0, 
       animate: true, 
       //step: 1, 
       slide: function (event, ui) { 
        current_box_old = currentbox; 
        currentbox = ui.value; 
        if (currentbox > current_box_old) 
         $('#insidediv_container').animate({ "margin-left": "-=" + box_size + "px" }, "normal"); 
        else 
         $('#insidediv_container').animate({ "margin-left": "+=" + box_size + "px" }, "normal"); 
       } 
      });

預先感謝您。

來源

2011-04-12 Dmitris

我希望results.length總是超短。在for循環中將項目附加到DOM是非常昂貴的。追加一個字符串，然後在循環結尾附加一個大字符串，以獲得更多超級快樂的樂趣時間（jQuery性能）。 – 2011-04-12 19:43:53

感謝您的建議，我甚至不知道這一點。將確保查看它。 – Dmitris 2011-04-12 19:49:30

這不起作用的原因是您要執行的所有代碼必須位於ajax成功方法中。由於ajax文章是異步的，ajax方法幾乎立即「返回」，並且流程立即流向您的第二個代碼塊。然而，因爲它很快到達了那裏，所以ajax文章還沒有收到它的結果，所以成功的方法還沒有被調用，這反過來意味着你正在尋找的元素還沒有被插入到DOM。

如果這些都是在你的代碼是做粗模塊化步驟：

 
$.ajax (A) -> http post (B) -> success (C) -> add elements to DOM (D) 
| 
v 
update new DOM elements (E)

隨後的代碼的實際流量是A，B，E，C，d，而不是A，B，C，d ，E.

希望這會有所幫助！

來源

2011-04-12 19:40:50 Richard

哦，我明白了，我的步驟是什麼，而不是確保第二個函數只有在第一個函數完全完成後才被調用？ – Dmitris 2011-04-12 19:50:41

將它包裝在一個函數中，然後在成功函數結束時將其稱爲.ajax調用。 – 2011-04-12 19:55:28

我認爲最新的jQuery還可以讓您將額外的.success（）回調鏈接到最初的ajax請求：$ .ajax（blah blah）.success（function（）{blah blah}）。success（function（）{blah blah} ）; – Richard 2011-04-12 20:05:57

顯然JQuery Ajax具有完整的功能。我最終將第二段代碼封裝到函數中，並完成了調用。

謝謝大家的幫助。

來源

2011-04-13 12:04:46 Dmitris

Ajax調用，請參閱visualy的元素，但Javascript不會看到它們

回答

相關問題