jQuery不會加載數據，直到第二次刷新

Question

好吧，我使用幾個插件首先填充一些選擇從一個PHP文件，然後「選擇」插件添加一些搜索功能到選擇。問題是，一旦我加載頁面選擇被添加到選擇，但選擇將有0選項，直到我刷新頁面。我不知道它是否與它們被調用的命令有關，但在移動版本上它似乎正在加載罰款。 （雖然我沒有看到任何搜索的CSS在那裏）。

下面是事情發生的順序。

HTML 頭

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script> 

    function LeagueOptions() { 
     var load = $.get('functions.php',{function:"LeagueOptions"}); 
     $(".leagueOpts").html('Refreshing'); 
     load.error(function() { 
      console.log("Mlkia kaneis"); 
      $(".leagueOpts").html('failed to load'); 
      // do something here if request failed 
     }); 
     load.success(function(res) { 
      console.log("Success"); 
      $(".leagueOpts").html(res); 

     }); 
     load.done(function() { 
      console.log("Completed"); 
     }); 
    } 
    function fillTeams(){ 
     var load = $.get('functions.php',{function:"fillTeams"}); 
     $(".fillTeams").html('Refreshing'); 
     load.error(function() { 
      console.log("Mlkia kaneis"); 
      $(".fillTeams").html('failed to load'); 
      // do something here if request failed 
     }); 
     load.success(function(res) { 
      console.log("Success"); 
      $(".fillTeams").html(res); 
      // Datepicker 
      $('#datepicker1').datepicker({ 
       format: 'yyyy-dd-mm' 
      }); 

     }); 
     load.done(function() { 
      console.log("Completed"); 
     }); 
    } 
    </script> 

中間頁的頁

<script language="javascript" type="text/javascript" src="js/plugins/chosen/chosen/chosen.jquery.min.js"></script> 

    <script type="text/javascript"> 
     var config = { 
      '.chosen-select'   : {}, 
      '.chosen-select-deselect' : {allow_single_deselect:true}, 
      '.chosen-select-no-single' : {disable_search_threshold:10}, 
      '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'}, 
      '.chosen-select-width'  : {width:"95%"} 
     } 
     for (var selector in config) { 
      $(selector).chosen(config[selector]); 
     } 
     var config2 = { 
      '.fillTeams'   : {}, 
      '.fillTeams-deselect' : {allow_single_deselect:true}, 
      '.fillTeams-no-single' : {disable_search_threshold:10}, 
      '.fillTeams-no-results': {no_results_text:'Oops, nothing found!'}, 
      '.fillTeams-width'  : {width:"95%"} 
     } 
     for (var selector in config2) { 
      $(selector).chosen(config2[selector]); 
     } 
     var config3 = { 
      '.leagueOpts'   : {}, 
      '.leagueOpts-deselect' : {allow_single_deselect:true}, 
      '.leagueOpts-no-single' : {disable_search_threshold:10}, 
      '.leagueOpts-no-results': {no_results_text:'Oops, nothing found!'}, 
      '.leagueOpts-width'  : {width:"95%"} 
     } 
     for (var selector in config3) { 
      $(selector).chosen(config3[selector]); 
     } 
    </script> 

的

     <select name="teamName" class="fillTeams" id="default-select"> 
          <script> 
          fillTeams(); 
          </script> 
         </select> 

         <select name="leagueID" class="leagueOpts"> 
          <script> 
          LeagueOptions(); 
          </script> 
         </select> 

底部的難道不應該是正確的順序？聲明函數，調用它們來填充選擇，然後在底部添加插件到特定的類中？爲什麼只有在刷新後才加載選擇中的數據？

Answer 1

是的，這是正確的訂單，但底部的代碼將在您的ajax調用返回內容之前運行。把整個選擇的配置放入一個函數中，比如setupChosen(){...allthatcode...}，並在成功方法中調用它。

load.success(function(res) { 
    setupChosen(); 
    ...other code... 
} 

編輯：看起來您設置了兩個選擇，兩者都需要選擇可以綁定到他們之前加載。有幾種方法可以做到這一點，但你可以嘗試這樣的事情。

HTML：

<select name="teamName" class="fillTeams" id="default-select"> 
    </select> 

    <select name="leagueID" class="leagueOpts"> 
    </select> 

JS：

$(document).ready(function(){ 
    LeagueOptions(); 
}); 
function LeagueOptions() { 
    var load = $.get('functions.php',{function:"LeagueOptions"}); 
    $(".leagueOpts").html('Refreshing'); 
    load.error(function() { 
     $(".leagueOpts").html('failed to load'); 
    }); 
    load.success(function(res) { 
     $(".leagueOpts").html(res); 
    }); 
    load.done(function() { 
    // Call the next load once it's finished 
    fillTeams(); 
    }); 
} 
function fillTeams(){ 
    var load = $.get('functions.php',{function:"fillTeams"}); 
    $(".fillTeams").html('Refreshing'); 
    load.error(function() { 
     $(".fillTeams").html('failed to load'); 
    }); 
    load.success(function(res) { 
     $(".fillTeams").html(res); 
     $('#datepicker1').datepicker({ 
      format: 'yyyy-dd-mm' 
     }); 

    }); 
    load.done(function() { 
     // Now that we've loaded both, set up Chosen 
     setupChosen(); 
    }); 
}