jquerymobile - 包括 .js 和 .html答案

【问题标题】：jquerymobile - include .js and .htmljquerymobile - 包括 .js 和 .html
【发布时间】：2011-01-10 04:22:17
【问题描述】：

在我的应用程序中，我使用多个 html 页面来显示内容，并且每个页面都有自己的 .js 文件。当我调用 html 页面时，还包括 .js 文件。在 .js 中，我使用的是$('div').live('pageshow',function(){})。我正在从 .js(using $.mobile.changePage("htmlpage")) 调用 html 文件。

我的问题：考虑一下，我有两个 html 文件。 second.html 文件在 one.js 中调用。当我显示 second.html 时，那个时候 one.js 会再次重新加载。我收到警报“one.js”然后是“second.js”

one.html

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="jquery.mobile-1.0a2.min.css" />
    <script src="jquery-1.4.3.min.js"></script>
    <script src="jquery.mobile-1.0a2.min.js"></script> 
    <script src="Scripts/one.js"></script>
  </head> 
  <body>         
    <div data-role="page">
    </div>
  </body>
</html>

Second.html

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Sample </title> 
    <link rel="stylesheet" href="../jquery.mobile-1.0a2.min.css" />
    <script src="../jquery-1.4.3.min.js"></script>
    <script src="../jquery.mobile-1.0a2.min.js"></script>
    <script type="text/javascript" src="Scripts/second.js"></script>
  </head> 
  <body>
    <div data-role="page">   
      <div data-role="button" id="link" >Second</div>
    </div><!-- /page -->
  </body>
</html>

one.js

$('div').live('pageshow',function()
{     
   alert("one.js");
   //AJAX Calling 
   //success result than call the second.html 
   $.mobile.changePage("second.html");                   
});

second.js

$('div').live('pageshow',function(){
{     
   alert('second.js');  
   //AJAX Calling 
   //success result than call the second.html 
   $.mobile.changePage("third.html");                   
});

注意：当我显示forth.html时，重新加载以下文件（one.js，second.js，third，js和fourth.js。但我只需要fourth.js）。我尝试使用 $.document.ready(function(){});但是那个时候.js没有调用。

【问题讨论】：

您应该发布一些代码以帮助澄清您的要求。
嗨..我发布了示例代码。请帮帮我。
显示 second.html 时，是完全重新加载页面还是使用 Ajax 加载？
我正在使用 AJAX 调用。根据 ajax 结果，我调用了 second.html。

标签： jquery jquery-mobile

【解决方案1】：

pageshow 事件绑定了每次页面加载时触发的 JavaScript 函数。当您加载第二个页面时，您正在创建另一个实际上不需要创建的 pageshow 函数。

这应该有助于解决您的问题，当且仅当您定义一次：

 $('div').live('pageshow',function(event, ui){
    alert('This page was just hidden: '+ ui.prevPage);
 });

 $('div').live('pagehide',function(event, ui){
    alert('This page was just shown: '+ ui.nextPage);
 });

当您转换页面时，这会提醒您刚刚显示的页面以及刚刚隐藏的页面。

很好的资源：
http://jquerymobile.com/demos/1.0a2/#docs/api/events.html

http://forum.jquery.com/topic/mobile-events-documentation

【讨论】：

嗨，我对这个很陌生。我边学边学。你能帮我怎么做吗？
我正在调用 $('div[data-role="page"]').unbind();在移动第二页之前。但它仍然在召唤。 $('div').live('pageshow',function() { alert("one.js"); //AJAX调用 //成功结果比调用second.html $('div[data-role=" page"]').unbind('pageshow'); $.mobile.changePage("second.html"); });提前致谢
您好，感谢您的回复。请澄清我的疑问。 U 表示，将所有 .js 文件考虑到单个文件中？

【解决方案2】：

根据oers评论编辑（对不起，这里是新手）：

这是基于当前 HTML 页面加载 JS 文件的另一种方法

在应用程序的每个页面中都包含一个脚本文件，但它只不过是一个“引导程序”文件，它检测当前页面，然后将 JavaScript 文件插入 DOM。

此函数将插入 Javascript：

function insertScript(script, container) {
    var elem = document.createElement('script');
    elem.type = 'text/javascript';
    elem.src = 'Assets/Scripts/' + script + '.js';
    container.appendChild(elem);
}

这段代码检测到当前页面

// The 'pagechange' event is triggered after the changePage() request has finished loading the page into the DOM 
// and all page transition animations have completed.
// See: https://gist.github.com/1336327 for some other page events
$(document).bind('pagechange', function(event){

// grab a list of all the divs's found in the page that have the attribute "role" with a value of "page"
    var pages = $('div[data-role="page"]'),
    // the current page is always the last div in the Array, so we store it in a variable
    currentPage = pages[pages.length-1],
    // grab the url of the page the  was loaded from (e.g. what page have we just ajax'ed into view)
    attr = currentPage.getAttribute('data-url');

// basic conditional checks for the url we're expecting
if (attr.indexOf('home.html') !== -1) {
    // now we know what page we're on we can insert the required scripts.
    // In this case i'm inserting a 'script.js' file.
    // I do this by passing through the name of the file and the 'currentPage' variable
    insertScript('search', currentPage);
}

// rinse and repeat...
if (attr.indexOf('profile.html') !== -1) {
    insertScript('profile', currentPage);
}

});

Reference Link

【讨论】：

欢迎来到 Stack Overflow！虽然这在理论上可以回答这个问题，it would be preferable 在这里包括答案的基本部分，并提供参考链接。