Question

我非常感谢你的帮助，因为我一直在寻找并完全迷失在可能出错的地方。

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

提前谢谢。

Answer 1

这不起作用的原因是你想要执行的整个代码必须在ajax成功方法中。因为ajax post是异步的，所以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。

希望这有帮助！

Answer 2

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

感谢大家的帮助。

Ajax调用，直观地看到元素，但Javascript没有看到它们

2 个答案: