getScript函数工作但没有得到一些CSS
所以每次我在ajax上加载我的getScript函数时，一些js正在工作，其中一些不是。 但如果我正在加载试图加载我的footer.php它正在工作。 但我需要动态加载它，因为我使用ajax加载我的页面，我需要每次更改内容时加载我的js文件，而且看起来我的.js文件没有从页面获取css。 这是我加载脚本的代码。
JS
var base_url = window.location.origin; if (window.location.pathname.split('/')[1] === 'music' || window.location.pathname.split('/')[1] === 'musicsystem') base_url = base_url + '/' + window.location.pathname.split('/')[1]; $(document).ready(function() { $.ajax({ async: false, url: base_url + '/dashboard/index', success: function(data) { var getScript = jQuery.getScript; jQuery.getScript = function(resources, callback) { var length = resources.length, handler = function() { counter++; }, deferreds = [], counter = 0, idx = 0; for (idx; idx < length; idx++) { deferreds.push(getScript(resources[idx], handler)); } jQuery.when.apply(null, deferreds).then(function() { callback && callback(); }); }; var scripts = [ base_url + "/assets/bower_components/jquery/dist/jquery.min.js", base_url + "/assets/bower_components/bootstrap/dist/js/bootstrap.min.js", base_url + "/assets/bower_components/jquery-ui/jquery-ui.min.js", base_url + "/assets/bower_components/datatables.net/js/jquery.dataTables.min.js", base_url + "/assets/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js", base_url + "/assets/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js", base_url + "/assets/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js", base_url + "/assets/plugins/jvectormap/jquery-jvectormap-world-mill-en.js", base_url + "/assets/bower_components/jquery-knob/dist/jquery.knob.min.js", base_url + "/assets/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js", base_url + "/assets/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js", base_url + "/assets/bower_components/jquery-slimscroll/jquery.slimscroll.min.js", base_url + "/assets/bower_components/fastclick/lib/fastclick.js", base_url + "/assets/dist/js/adminlte.min.js", base_url + "/assets/dist/js/pages/dashboard.js", base_url + "/assets/plugins/iCheck/icheck.min.js", base_url + "/assets/dist/js/demo.js", base_url + "/assets/js/dataTables.colReorder.min.js", base_url + "/assets/dist/js/clipboard.js", base_url + "/assets/js/audio.min.js", base_url + "/assets/js/config.js", base_url + "/assets/js/dropzone.js", base_url + "/assets/js/howler.js", base_url + "/assets/js/upload.js", base_url + "/assets/js/player.js", base_url + "/assets/js/songdraganddrop.js", base_url + "/assets/js/pitching.js", base_url + "/assets/js/share.js", base_url + "/assets/js/alertify.js", base_url + "/assets/bower_components/select2/dist/js/select2.full.min.js", base_url + "/assets/js/newscript.js" ]; $.getScript(scripts, function(data, textStatus) { $('#inside').html(data); }); } }); });
也许以下内容会更好，即使没有记录jQuery函数getScript返回一个promise，你也可以使用它。 $ .ajax也会返回一个承诺，所以你可以使用它。
var base_url = window.location.origin;
if (window.location.pathname.split('/')[1] === 'music' || window.location.pathname.split('/')[1] === 'musicsystem') base_url = base_url + '/' + window.location.pathname.split('/')[1]; const getScripts = resources => { return jQuery.when.apply( null ,resources.map( resource => $.getScript(base_url + resource) ) ) ; } $(document).ready(function() { $.ajax({ //async: false,//are you kidding? async false is still a thing???? I assume you'd like someone to hire you at some point in time right? url: base_url + '/dashboard/index' }) .then( data => { const scripts = [ //are you sure you'd want to load all the scripts? //I'm pretty sure you don't need to load your libraries again //would be simpler to write a js function that will initialize //the new content that's on the page instead of this "/assets/bower_components/jquery/dist/jquery.min.js", "/assets/bower_components/bootstrap/dist/js/bootstrap.min.js", "/assets/bower_components/jquery-ui/jquery-ui.min.js", "/assets/bower_components/datatables.net/js/jquery.dataTables.min.js", "/assets/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js", "/assets/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js", "/assets/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js", "/assets/plugins/jvectormap/jquery-jvectormap-world-mill-en.js", "/assets/bower_components/jquery-knob/dist/jquery.knob.min.js", "/assets/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js", "/assets/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js", "/assets/bower_components/jquery-slimscroll/jquery.slimscroll.min.js", "/assets/bower_components/fastclick/lib/fastclick.js", "/assets/dist/js/adminlte.min.js", "/assets/dist/js/pages/dashboard.js", "/assets/plugins/iCheck/icheck.min.js", "/assets/dist/js/demo.js", "/assets/js/dataTables.colReorder.min.js", "/assets/dist/js/clipboard.js", "/assets/js/audio.min.js", "/assets/js/config.js", "/assets/js/dropzone.js", "/assets/js/howler.js", "/assets/js/upload.js", "/assets/js/player.js", "/assets/js/songdraganddrop.js", "/assets/js/pitching.js", "/assets/js/share.js", "/assets/js/alertify.js", "/assets/bower_components/select2/dist/js/select2.full.min.js", "/assets/js/newscript.js" ]; $('#inside').html(data);//set the html before loading the scripts return getScripts(scripts) .then(x=>data);//return data after getscript is done } ) .then( undefined ,err => console.warn("Failed:",err)//handle the error ); });