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

Question

这工作正常，除了我希望当我从下拉列表中选择新值时显示 loading-indicator div。第一次运行时，加载指示器会出现，然后在加载远程内容后消失。我将下拉菜单更改为不同的值，但加载指示器没有重新出现。 "new"内容最终会在加载完成后显示。

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