Ajax调用，以可视方式看到元素，但是Javascript没有看到它们

问题描述

|| 非常感谢您的帮助，因为我一遍又一遍地寻找并完全迷失了可能出问题的地方。 我有一个对Web服务的Ajax调用，并且通过此调用，我正在构建一些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\");
                }
            });

先感谢您。     

解决方法

这不起作用的原因是，您要执行的所有代码都必须在ajax成功方法内。因为ajax发布是异步的，所以ajax方法几乎立即“返回”，并且流程立即流到第二个代码块。但是，由于它到达的速度如此之快，因此ajax帖子尚未收到它的结果，因此尚未调用成功方法，这反过来意味着您要查找的元素具有尚未插入DOM。 如果这些是您的代码正在执行的粗略模块化步骤： $ .ajax（A）-> http post（B）->成功（C）->向DOM添加元素（D） | v 更新新的DOM元素（E） 那么实际的代码流是A，B，E，C，D，而不是A，B，C，D，E。 希望这可以帮助！     ,显然，JQuery Ajax具有完成的功能。最后，我将第二段代码包装到函数中，并从完整的位置进行了调用。 谢谢大家的帮助。