Ajax 调用，可视化查看元素，但 Javascript 看不到它们答案

【问题标题】：Ajax call, see elements visualy but Javascript doesn't see themAjax 调用，可视化查看元素，但 Javascript 看不到它们
【发布时间】：2011-04-12 19:12:02
【问题描述】：

非常感谢您的帮助，因为我一遍又一遍地查看并完全迷失在可能出现的问题中。

我有一个对 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");
                }
            });

提前谢谢你。

【问题讨论】：

我希望 results.length 总是超短的。在 for 循环中将项目附加到 DOM 非常昂贵。追加一个字符串，然后在循环结束时追加一次大字符串，以获得更多超级快乐的乐趣（jQuery 性能）。
感谢您的建议，我什至不知道这一点。一定会调查的。

标签： javascript asp.net web-services jquery

【解决方案1】：

这不起作用的原因是您要执行的整个代码必须在 ajax 成功方法中。因为 ajax 发布是异步的，所以 ajax 方法几乎立即“返回”并立即流向您的第二个代码块。但是因为到的太快了，ajax post还没收到结果，所以还没调用success方法，也就是说你要找的元素还没有插入到DOM。

如果这些是您的代码正在执行的粗略模块化步骤：

$.ajax (A) -> http post (B) -> 成功 (C) -> 向 DOM 添加元素 (D) | v 更新新的 DOM 元素 (E)

那么实际的代码流是A、B、E、C、D而不是A、B、C、D、E。

希望这会有所帮助！

【讨论】：

哦，我明白了，除了确保仅在第一个函数完全完成后才调用第二个函数之外，我的步骤是什么？
将其包装在一个函数中，然后在成功函数的末尾将其调用到您的 .ajax 调用中。
我认为最新的 jQuery 还允许您将额外的 .success() 回调链接到初始 ajax 请求：$.ajax(blah blah).success(function(){blah blah}).success(函数（）{等等等等}）；

【解决方案2】：

显然 JQuery Ajax 已经完成了功能。我最终将我的第二段代码包装成函数并从完成调用。

感谢大家的帮助。

【讨论】：