Question

这很好用，除非我想从下拉列表中选择一个新值时显示loading-indicator div。第一次运行时，加载指示符会在加载远程内容后消失。我将下拉菜单更改为其他值，但加载指示符不会重新出现。一旦完成加载，“新”内容最终会显示出来。

<select name="branch_name" id="branch_name">
    <option value="Branch1">Branch1</option>
    <option value="Branch2">Branch2</option>
    <option value="Branch3">Branch3</option>
</select>

<div id="mycontent">
    <div id="loading-indicator" style="display:none">
    Scanning subversion<img src="/images/ajax-loader.gif" /></div>
</div>

<script type="text/javascript">
    $(function(){
        $('#branch_name').bind("change", function() {
            $('#loading-indicator').show();
            $('#mycontent').load('/tags/runme',{branch_name: $(this).val()});
        });
    });
</script>

Answer 1

.load() 替换元素的HTML，因此将加载指标移到#mycontent之外，并手动隐藏。

<div id="loading-indicator" style="display:none">
    Scanning subversion<img src="/images/ajax-loader.gif" />
</div>
<div id="mycontent"></div>

<script type="text/javascript">
    $(function(){
        var $spinner = $('#loading-indicator');
        $('#branch_name').bind("change", function() {
            $spinner.show();
            $('#mycontent').load('/tags/runme',{branch_name: $(this).val()}, function () {
                $spinner.hide();
            });
        });
    });
</script>

Answer 2

你可以像这样使用回调：

$('#mycontent').load('/tags/runme',{branch_name: $(this).val()}, function(data) {
   //Do your stuff here, this will be executed once the request is over.
   $('#loading-indicator').hide()
});

参考：http://api.jquery.com/load/

Answer 3

加载指示符位于要加载内容的div内。您加载的内容将替换该div中的所有内容，包括指示符。

要修复，请将指标移到div之外：

<div id="loading-indicator" style="display:none">
<div id="mycontent">
    Scanning subversion<img src="/images/ajax-loader.gif" /></div>
</div>

加载内容后

或.prepend()。

$("#mycontent").prepend('<div id="loading-indicator">');

Answer 4

您可以使用.not()排除加载指标。

$("#mycontent > div").not('#loading-indicator').hide();

DEMO

一旦使用jQuery加载内容，如何重置div？

4 个答案: