如何使用jQuery加載內容時重置div？

這工作正常，除了我想loading-indicator div顯示當我從下拉列表中選擇一個新的值。第一次運行時，一旦遠程內容被加載，加載指示符就會消失。我將下拉菜單更改爲不同的值，但加載指示不會重新出現。加載完成後，「新」內容最終會顯示出來。如何使用jQuery加載內容時重置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>

來源

2013-06-12 luckytaxi

只是想知道，爲什麼你使用'.bind'而不是'.on'？這是首選的方法。 –

是的，它應該是'.on'。我在兩個文件之間複製代碼，並且在啓動此線程時忘記修改該部分。它實際上是'.on'。接得好。 – luckytaxi

取代元素的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>

來源

2013-06-12 01:53:05

感謝您緩存該選擇器:) –

似乎無法正常工作。我選擇「Branch1」，我看到了微調。它完成加載，但沒有內容。一旦我從下拉列表中選擇了一個不同的值，那麼之前的結果就會顯示出來。我相信'div'頂部是混合起來的。 – luckytaxi

@luckytaxi對不起，這個標記並不完美。固定。 –

您可以使用回調是這樣的：

$('#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/

來源

2013-06-12 01:52:45 Antoine

加載指標是要加載的內容的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">');

來源

2013-06-12 01:53:01

您可以使用.not()來排除您的加載指標。

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

DEMO

來源

2013-06-12 02:14:21 Tom

如何使用jQuery加載內容時重置div？

回答

相關問題