问题
I am building a mobile web application using jQuery Mobile 1.4.0, and I am using different html files for each page for organizational purposes, as this will be a rather large application.
I understand that the document is not utilized on secondary pages because a link in jQuery Mobile pulls the info inside of data-role="page" from the file via AJAX and inserts it into the dom and displays it. I am fine with that.
What I would like is for the javascript in the file to be able to be utilized as well (I do not want to use data-ajax=false and lose the transitions etc.). Upon reading the docs I thought I may be able to use:
$(document).on('pagecontainershow', function(event, ui) { });
and get the result I want. This works fine on page one, but does not work on subsequent pages unless I manually enter that URL into the browser in a new tab/session. So I tried
$('#pageid').on('pagecontainershow', function(event, ui) { });
thinking that might do the trick, hoping that jQM would know to pull it with that page, by using the proper ID. However this does not work at all.
So right now I'm stuck. Can anyone help? I can't imagine i'm the only person that doesn't want to keep thousands and thousands of lines of javascript on the main page.
Thanks in advance
回答1:
jQuery Mobile loads first page via HTTP and the rest of external pages via Ajax. In Single Page Model it loads first data-role="page" in <body> and neglects the rest of elements outside data-role="page".
To overcome this problem and in order to load different libraries which aren't included in first page, you need to place them inside data-role="page" of any external page.
If you turn ajax off data-ajax="false", pages will be loaded normally via HTTP.
来源：https://stackoverflow.com/questions/21618748/jquery-mobile-load-script-along-with-page-pagecontainershow