Cordova：在html元素加載之前加載Javascript

Question

我有bootstrap datepicker。現在我想通過javascript啓動一個datepicker事件。我想應用datepicker的html元素如下，並在index.html中定義。

<input type="text" placeholder="Departure date..." data-provide="datepicker" class="calendar-box"> 

這裏是在main.js文件中定義的javascript代碼。

$('.calendar-box').on('changeDate', function(ev){ 
    $(this).datepicker('hide'); 
}); 

當調試這個代碼，並試圖找到$('.calendar-box')它給我一個空陣列，這意味着html元素不受此片的代碼運行的時間定義。

以下是正在加載的腳本的順序。

<script type="text/javascript" src="libs/jquery.js"></script> 
    <script type="text/javascript" src="libs/bootstrap-datepicker.min.js"></script> 
    <script type="text/javascript" src="cordova.js"></script> 
    <script type="text/javascript" src="libs/index.js"></script> 
    <script type="text/javascript" src="libs/platformOverrides.js"></script> 
    <script type="text/javascript" src="libs/angular.min.js"></script> 
    <script type="text/javascript" src="libs/angular-route.min.js"></script> 
    <script type="text/javascript" src="scripts/assets.js"></script> 
    <script type="text/javascript" src="scripts/assets.js"></script> 
    <script type="text/javascript" src="scripts/main.js"></script> 

問題是我該如何運行腳本，使$（'。calendar-box'）給我正確的標記。我已經嘗試將javascript代碼放在deviceReady事件和document.ready之下。但仍然獲得calendar-box的emptry陣列。

讓我知道你是否需要知道別的。

Answer 1

如果你不關心阻塞，扔腳本文件撰寫

 document.write('<script type="text/javascript" src="scripts/assets.js"><' + '\/script>'); 

裏面如果你照顧，你可以使用像requireJS，或像一個窮人的裝載機，稱之爲異步（不要被任何事情困惑）

/** 
    * Async accepts a url and a callback, it loads the script, adding an eventListener 
    * to make sure the callback is done when the script is loaded 
    * @param {String} some url 
    * @param {onLoadCallback} you do whatever you want when this callback is called 
    **/ 
    var loadAsyncScript = function(url, onLoadCallback) { 
    var script = document.createElement('script'); 
    var parent = document.getElementsByTagName('script')[0]; 

    if (onLoadCallback) { 
    // assign event before src is set, 
    // IE may start getting scripts just after src is assigned and before script is attached to DOM 
    attachEvent(script, 'load', onLoadCallback); 
    } 

    script.async = true; 
    script.src = '//' + url; 
    parent.parentNode.insertBefore(script, parent); 
};