javascript - IE : jQuery. show() 仅在显示之前/之后使用 alert() 时显示元素

Question

我正在尝试在 javascript 函数上添加一个简单的“等待框”，如下所示:

function caricaElenco(indice) {
    (...)
    $("[id*=Wait1_WaitBox]").show(); // Visualizzo 'rotella' caricamento
    (...)
    $("[id*=Wait1_WaitBox]").hide();
}

它在 Firefox 上运行良好，但在 Internet Explorer 11 上运行不佳，这没有显示出来。 HTML 是:

<div id="ctl00_Wait1_WaitBox" class="updateProgress">
    Attendere...<br />
    <img src="../Images/wait.gif" align="middle" />
</div>

最奇怪的是我尝试这个，进行简单的检查:

function caricaElenco(indice) {
    (...)
    alert($("[id*=Wait1_WaitBox]").css('display'))
    $("[id*=Wait1_WaitBox]").show(); // Visualizzo 'rotella' caricamento
    alert($("[id*=Wait1_WaitBox]").css('display'))
    (...)
    $("[id*=Wait1_WaitBox]").hide();
}

它正在运行，我的意思是它显示了带有“无”和“阻止”之后的警报...它也显示了框!但并非没有警报……为什么？

更新:

尝试使用 [id*="Wait1_WaitBox"]，但还是一样。 jQuery 版本为 1.8.2。

与

it's working only with the alert

我的意思是如果我这样做:

function caricaElenco(indice) {
    (...)
    alert('whatever');
    $("[id*=Wait1_WaitBox]").show(); // Visualizzo 'rotella' caricamento
    alert('whatever');
    (...)
    $("[id*=Wait1_WaitBox]").hide();
}

它正在显示框，但如果我这样做:

function caricaElenco(indice) {
    (...)
    $("[id*=Wait1_WaitBox]").show(); // Visualizzo 'rotella' caricamento
    (...)
    $("[id*=Wait1_WaitBox]").hide();
}

它在 Internet Explorer 11 上不起作用(我的意思是不显示“等待框”，但在(...)正确地执行该函数必须执行的所有其他操作——使用 AJAX 调用加载 gridview)，在Firefox 都在工作。没有 JavaScript 错误。

更新 2:几乎整个 javascript 函数:

// Fill part of gridView
function loadList(index) {
    index = parseInt(index);
    buffer = 100; // Number of rows to load
    $("[id*=divGrid]").unbind('scroll');
    $('[id*="Wait1_WaitBox"]').show(); // Show loading 'wheel' 
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "PageName.aspx/webMethodName",
        data: '{id:' + $("[id*=hdnID]").val() + ', index:' + index + '}',
        dataType: "json",
        async: false,
        success: function (response) {
        if (index == 0) {
            (...)
            $("[id*=grid] tr:last-child").remove();
            var row = "<tr class='" + response.d[index].State + "'>";
            row += "<td class="Column1"></td>";
            (...)
            row += "<td class="DateColumn"></td>";
            (...)
            row += "<td class='columnN'></td></tr>";

            $("[id*=grid]").append(row);
        }
        row = $("[id*=grid] tr:last-child").clone(true);
        $("[id*=grid] tr:last-child").remove();
        if (index <= response.d.length) {
            if (index + buffer > response.d.length)
                var stop = response.d.length;
            else
                var stop = index + buffer;
            (...)
            for (var i = index; i < stop; i++) {
                var j = 0;
                (...)  
                $("td", row).eq(j).html("<span id='lblCodeNumber" + i + "' >" + response.d[i].CodeNumber + "</span>"); j++;
                (...)
                var effectDate = new Date(parseInt(response.d[i].effectDate.substr(6)));
                $("td", row).eq(j).html(effectDate.getDate() + '/' + (effectDate.getMonth() + 1) + '/' + effectDate.getFullYear()); j++;
                }
                (...)
                var toBeCounted = "";
                var checked = "";
                if (response.d[i].ToBeCounted != null)
                    toBeCounted = response.d[i].ToBeCounted .toString();
                else
                    toBeCounted = "true"; 
                if (toBeCounted == "true")
                    checked = "checked = 'checked'";
                else
                    checked = ""; 
                var rdToBeCounted = "<span><input type='radio' class='radio' " + checked + " name='ToBeCounted" + i + "' value='s' id='sToBeCounted" + i + "' />";
                rdToBeCounted += "<label for='s" + i + "'>YES</label>";
                if (toBeCounted == "false")
                    checked = "checked = 'checked'";
                else
                    checked = "";
                toBeCounted += "<input type='radio' class='radio' " + checked + " name='ToBeCounted" + i + "' value='n' id='nToBeCounted" + i + "' />";
                rdToBeCounted += "<label for='n" + i + "'>NO</label></span>";
                $("td", row).eq(j).html(rdToBeCounted); 
                $("[id*=grid]").append(riga);
                (...)
                riga = $("[id*=grid] tr:last-child").clone(true);
            }
            if (stop < response.d.length) {
                $("[id*=divGrid]").scroll(function (e) {
                    if (element_in_scroll(".congruenti tbody tr:last")) {
                        loadList($(".congruenti tbody tr:last td:last").html());
                    };
                });
            }
            $('[id*="Wait1_WaitBox"]').hide();
        }
    },
    error: function (result) {
        alert("Error! " + result.status + " - " + result.statusText);
    }
});
}

Answer 1

最后你似乎又把它藏起来了 $("[id*=Wait1_WaitBox]").hide();.

您需要显示这两行之间的内容。

它与 alert 配合使用，因为脚本的执行会被卡住，直到您关闭警报(并且最后一行尚未执行)。