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不会看到它们

回答

相关问题