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(); 
    }); 
}