隐藏后div不显示答案

【问题标题】：Div not showing after being hidden隐藏后div不显示
【发布时间】：2018-06-30 21:19:41
【问题描述】：

我在 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').hide();从文档准备好并将 style="display:none" 放在 div 中
你能分享一个示例链接吗？
@ThaierAlkhateeb 似乎没有用。结果是一样的。
hide() 将display 设置为none，是一样的。您正在替换 #divForSectionPreview 的内容，包括其中的预加载器。
@Gabriel 这已修复。

标签： javascript jquery html ajax

【解决方案1】：

Gabriel 在 cmets 中回答了这个问题。我只需要将.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>

【讨论】：