jQuery .hide() 在 AJAX 请求后不执行答案

【问题标题】：jQuery .hide() does not excecute after AJAX requestjQuery .hide() 在 AJAX 请求后不执行
【发布时间】：2015-07-22 19:46:38
【问题描述】：

我正在使用 AJAX 请求填充无序列表。填充后，我希望它立即隐藏，以便在需要时显示它。我尽可能地剥离了代码，以明确这一点。 AJAX 代码将为我构建一个 class=DropDownElement 的 li 元素。一旦请求完成，我希望它们隐藏起来，但现在，它没有按预期工作。我猜，那是因为 jQuery 无法检查是否出现了新的 '.DropdownElements'。

我正在使用以下代码：

function populateDropDown (){

var currentID = $(this).attr("id");

$('.DropDownElement').remove();


$.ajax({
    url: 'xml/wooddata.xml',
    type: 'get',
    dataType: 'xml',
    success: function(data) {

        $(data).find('wood[id="' + currentID + '"]').each(function(){

            var hasTraversal = $(this).find('images[rotation="traversal"]').children().length > 0;



            if (hasTraversal) {
                $(this).find('images[rotation="traversal"] image_description[lang="' + activeLanguage + '"]').each(function(){

                    var description = $(this).text();
                    $('#TraversalSelector').append('<li value="' + currentID + '" class="DropDownElement" id="' + currentID + '" data-rotation="traversal">' + description + '</li>');
                });
            };
        });
    }   
});

$('.DropDownElement').hide();

};

【问题讨论】：

您必须在 ajax 成功函数中隐藏您的元素。请记住，您正在处理异步任务。
放 $('.DropDownElement').hide();在成功功能下（最后）。如果您希望我修改您的代码以使其正常工作，请告诉我。

标签： javascript jquery ajax xml html

【解决方案1】：

ajax() 函数发送请求。调用该函数后，您将隐藏下拉元素。

在收到响应并调用success 函数之前，元素不存在。

将hide() 调用移到success 函数内。

【讨论】：

【解决方案2】：

把$('.DropDownElement').hide(); 放在里面，最后放在success: function(data) {}

 success: function(data) {
   ....
   $('.DropDownElement').hide();
 }

【讨论】：

【解决方案3】：

错误原因是javascript并行执行所有语句

因此，如果您希望它在成功函数之后发生，您应该在 成功函数中调用.hide() 函数。

还要添加一个错误函数：在 ajax 调用中并在其中调用 hide 函数

您也可以尝试添加超时

setTimeout(function(){ $('.DropDownElement').hide();},1000);

【讨论】：

【解决方案4】：

.hide 在 ajax 请求后起作用。

条件是该元素不应该被 $('.DropDownElement').remove();或（像这样）删除后，任何元素都不会隐藏。为了隐藏，元素应该在那里。

【讨论】：