jquery - 使用jQuery加载内容后如何重置div？

除我希望从下拉列表中选择一个新值时显示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>

最佳答案

.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>

关于jquery - 使用jQuery加载内容后如何重置div？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17056502/