Javascript 隐藏后未显示Div

我在一个div中有一个加载微调器，它在执行AJAX调用时显示。在第一次AJAX调用中，它显示并按预期工作。在这种情况下，加载微调器将替换占位符内容

在AJAX调用完成并且从AJAX调用填充Html内容之后，如果相同的函数再次运行，则不会显示加载微调器div。其他一切都按预期进行

<div class="col-md-8>
    <div id="divForSectionPreview">
        <div class="loaderDiv">
            <center>
                <img src="~/Images/loadingSpinner.gif" alt="loading.." />
            </center>
        </div>
        <div align="center" class="placeholderDiv">
            <h5 style="padding-top:30px">Placeholder content used before AJAX call is made....</h5>
        </div>
    </div>
</div>

<!--Html stored in another file, loaded by AJAX call-->     
<div class="divContent" style="background-color:white;">
  Html content returned from AJAX call...
</div>

<script>
  $(document).ready(function () {
    $('.loaderDiv').hide();//Hide loaderDiv
  }

  function loadContent(reportSectionId) {
    $('.divContent').hide();//Hide the existing preview content if it's there
    $('.placeholderDiv').hide();//Hide placehoder content if it's there
    $('.loaderDiv').show();//Show loaderDiv ****THIS IS WHAT ONLY WORKS THE FIRST TIME THE FUNCTION IS CALLED****

  $.ajax({
      type: "GET",
      url: "@Url.Action("../Path/File")",
      data: { id: id },
      dataType: 'html', 
      success: function (data) {
        $('#divForSectionPreview').html(data);//Load PartialView for requested section. PartialView is selected in the method based on what type of section is requested
        $('.loaderDiv').hide();//Hide loaderDiv
      },
      error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status + " " + thrownError);
      },
    });
  }
</script>

---

加布里埃尔在评论中回答了这个问题。我只需要将

.loaderDiv

元素移出

divForSectionPreview

，因为正如他所说的那样，

divForSectionPreview

的全部内容都被AJAX调用所取代，

divForSectionPreview

就是

.loaderDiv

所在的地方

<div class="col-md-8>
    <div class="loaderDiv">
        <center>
            <img src="~/Images/loadingSpinner.gif" alt="loading.." />
        </center>
    </div>
    <div id="divForSectionPreview">
        <div align="center" class="placeholderDiv">
            <h5 style="padding-top:30px">Placeholder content used before AJAX call is made....</h5>
        </div>
    </div>
</div>

<!--Html stored in another file, loaded by AJAX call-->     
<div class="divContent" style="background-color:white;">
  Html content returned from AJAX call...
</div>

<script>
  $(document).ready(function () {
    $('.loaderDiv').hide();//Hide loaderDiv
  }

  function loadContent(reportSectionId) {
    $('.divContent').hide();//Hide the existing preview content if it's there
    $('.placeholderDiv').hide();//Hide placehoder content if it's there
    $('.loaderDiv').show();//Show loaderDiv ****THIS IS WHAT ONLY WORKS THE FIRST TIME THE FUNCTION IS CALLED****

  $.ajax({
      type: "GET",
      url: "@Url.Action("../Path/File")",
      data: { id: id },
      dataType: 'html', 
      success: function (data) {
        $('#divForSectionPreview').html(data);//Load PartialView for requested section. PartialView is selected in the method based on what type of section is requested
        $('.loaderDiv').hide();//Hide loaderDiv
      },
      error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status + " " + thrownError);
      },
    });
  }
</script>

---

remove$（'.loaderDiv'）.hide（）；从document ready并将style=“display:none”放在div中，您可以共享一个示例链接吗？@ThaierAlkhateeb，该链接似乎不起作用。结果是一样的。
hide（）
将
display
设置为
none
，结果是一样的。您正在替换
#divForSectionPreview
的内容，包括它里面的预加载程序。@Gabriel这已经修复了它。