这工作正常,除了我希望当我从下拉列表中选择新值时显示 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>
最佳答案
.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/