Cordova: Javascript lädt, bevor die HTML-Elemente geladen werden

Question

Ich habe eine bootstrap datepicker. Jetzt möchte ich ein Datepicker Event durch Javascript initiieren. Das html-Element, auf das ich den Datepicker anwenden möchte, folgt und ist in der index.html definiert.

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

Und hier ist der JavaScript-Code in der Datei main.js definiert.

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

Wenn ich diesen Code debuggen und versuchen $('.calendar-box') zu finden, es mir ein leeres Array gibt, was bedeutet, dass die HTML-Elemente durch die Zeit nicht dieses Stück Code ausgeführt wird definiert sind.

Hier ist die Reihenfolge der geladenen Skripte.

<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> 

Die quesstion ist, wie kann ich das Skript so ausgeführt werden, dass $ ('Kalender-box') gibt mir den richtigen Tag. Ich habe bereits versucht, den Javascript-Code unter deviceReady Ereignis und document.ready setzen. Aber immer noch ein Emptry-Array für calendar-box.

Lassen Sie mich wissen, wenn Sie etwas anderes wissen müssen.

Answer 1

Wenn Sie nicht über Blockierung egal, werfen Sie das Skript in document.write

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

Wenn Sie kümmern sich, Sie so etwas wie requireJS verwenden können, oder so etwas wie ein Loader des armen Mannes, nennen es Async (nicht durch etwas besseres zu verwechseln)

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