Cordova：HTML要素が読み込まれる前にJavaScriptが読み込まれます

Question

私はbootstrap datepickerです。今、私はjavascriptを使ってdatepickerイベントを開始したいと思います。 datepickerを適用するhtml要素は、次のとおりであり、index.htmlで定義されています。

ここには、main.jsファイルで定義されているjavascriptコードがあります。

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

私はこのコードをデバッグし、それは私のHTML要素は、コードのこの部分が実行されている時間によって定義されていないことを意味し、空の配列を与える$('.calendar-box')探してみてください。

スクリプトの読み込み順序は次のとおりです。

<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'）が私に正しいタグを与えるようにスクリプトを実行する方法です。私は既にdeviceReadyイベントとdocument.readyの下にjavascriptコードを入れてみました。しかし、まだcalendar-boxの空列を取得します。

他に知りたいことがある場合は教えてください。

Answer 1

あなたが世話をすれば、あなたは非同期で呼び出す、requireJSのようなもの、あるいは貧しい人のローダーのようなものを使用することができるのdocument.write

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

内のスクリプトを投げ、ブロックを気にしない場合（もっと良いもので混乱しないように）

/** 
    * 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); 
};