JQuery Mobile JS script runs first time but not when returning to page
Question
I have a JQuery Mobile page set up as such:
<body>
<div class="normal" data-role="page" data-title="Photo Stream">
<script type="text/javascript" src="js/photostream.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
function onDeviceReady() {
}
</script>
<div id="programholder">
~~addtional HTML~~
The external JS script photostream.js works when the app first opens, but then wont work again if I return to this page. I am assuming this is due to how AJAX loads the pages on top of each other, but seeing as my external link was within the data-role="page" div I assumed this got triggered each time that element reappeared.
Is there a way to have the external JS file reload again whenever this page is re-visited?
1 answers
solution1
1 ACCPTED 2013-08-16 05:02:19
If I understand your problem correctly, you want your external js file - photostream.js to be explicitly loaded every time a particular page loads. But this doesnt happen in JQuery Mobile because of the way AJAX loads the pages.
Off the top of my head, have you tried binding the external script to be loaded when the pageshow event is triggered.
$("#page1").on('pageshow', function(event, ui){
var filename = "photostream.js";
var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.