javascript - 按钮单击删除 dom 隐藏元素阻止我显示它

Question

我正在做一件简单的事情，但我不明白为什么会出现以下问题:当我在表单中输入一个值并单击按钮执行该功能时，“正在加载”元素消失并且无法显示.

Javascript 如下:

<div>
    <input id="magLog" name="magLog" type="text" style="width: 500px;"/>
    <button id="StartITSMcheck">Check</button>
</div>
<div>
    <div id="logContainer" class="filtersUNoBorder" style="padding-left: 8px; height:auto">
        <div id="loading" class="clear loading">
                Caricamento in corso...</div>
        <!--Add text after check-->
    </div>
</div>    
<script type="text/javascript">
    $(document).ready(function () {
        $("#loading").hide();
    });
    $("#StartITSMcheck").click(function () {
        if ($("#magLog").val() != "" && $("#magLog").val() != undefined) {
            $('#loading').show();  // show the loading message.
            $.ajax({
                type: "GET",
                url: '<%= Url.Action("StartITSMcheck", "Integration") %>',
                async: false,
                data: { "magLog": $("#magLog").val() },
                datatype: "html",
                success: function (result) {
                    $("#logContainer").html(result);
                    $('#loading').hide(); // hide the loading message
                },
                error: function (req, status, error) {
                    if (req.responseText.indexOf('12017') != -1) {
                        alert("CATCH: Status: " + status + " Error " + req.responseText);
                    }
                    else {
                        alert("Error getting data.com -> Req.responseText: " + req.responseText + "Req.status: " + req.status + "  status: " + status + " error: " + error);
                    }
                }
            });
        } else $("#logContainer").html("<p>Gentilmente inserire un magazzino logico</p>");
    });
</script>

Answer 1

$("#logContainer").html(result);

这可能是问题的原因。您将用您的响应替换 div 内的所有内容，其中包括您的加载元素。尝试将其放在 div 外部，如下所示:

<div id="logContainer" class="filtersUNoBorder" style="padding-left: 8px; height:auto">
    <!--Add text after check-->
</div>
<div id="loading" class="clear loading">Caricamento in corso...</div>