Jquery Mobile - $(document).ready 没有触发答案

【问题标题】：Jquery Mobile - $(document).ready not firingJquery Mobile - $(document).ready 没有触发
【发布时间】：2011-09-14 19:58:02
【问题描述】：

所以我有一个列表视图，其中每个组件都连接到一个点击功能，如下所示：

function launchNewPage() {
    $.mobile.changePage( "newPage.html", { transition: "slide"} );
}

我遇到的问题与下一页有关。该页面显示得很好，但没有加载任何资源。当我在 firebug 中检查页面时，没有加载任何必要的 JS 文件。最重要的是，似乎 $(document).ready 函数从未被执行过。有没有人知道我做错了什么？抱歉，我对 JQ 有点陌生...提前致谢。

请求的 HTML：

<!DOCTYPE html> 
<html>
<head> 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> 
    <title></title> 

    <link rel="stylesheet" href="CSS/JqueryMobile.css" />
    <link rel="stylesheet" href="CSS/theme.css" />  
    <link rel="stylesheet" href="CSS/JQM-DatePicker.css" /> 

    <script type="text/javascript" src="JS/jquery-1.6.2.js"></script>
    <script type="text/javascript" src="JS/JqueryMobile.js"></script>       
    <script type="text/javascript" src="JS/JQM-DatePicker.js"></script>

    <script type="text/javascript" src="JS/mockjax.js"></script>    
    <script type="text/javascript" src="JS/soyutils.js"></script>
    <script type="text/javascript" src="JS/fields.js"></script>
    <script type="text/javascript" src="JS/JSDictionaryObject.js"></script>
    <script type="text/javascript" src="JS/AddingForm.js"></script>
</head> 
<body> 
    <div id="page" data-role="page" data-theme="x">
        <div class="ui-body-x" data-role="header" data-position="fixed">
            <h1 class="ui-header-style" style="text-align:left; margin-left:10px;">Add New Record</h1>
            <div data-type="horizontal"  class="ui-btn-right ui-button-group"> 
                <a id="cancelButton" href="http://www.google.com" data-role="link"  data-ajax="false">Cancel</a>
                <a id="submitButton" form="f" class="ui-btn-up-x" onClick="javascript:return submitPressed();"data-role="button" data-icon="" data-ajax="false">Submit</a> 
            </div>              
        </div><!-- /header -->

        <div data-role="content" data-theme="x">

            <form  id="f" src="#"></form>       
        </div><!-- /content -->

    </div><!-- /page -->

</body>

【问题讨论】：

第二页的 $(document).ready 函数中有什么，你想用它做什么？
还有另一个函数可以触发 ajax 请求以获取表单的 UI 组件。
在萤火虫中，我看不到该页面的关联 JS 文件或任何东西。我不认为他们正在加载......

标签： javascript jquery html jquery-mobile

【解决方案1】：

你不能用$(document).ready()启动jQuery mobile，你应该这样开始：

尝试在第一个 HTML 中使用它

$("div[data-role*='page']").live('pageshow', function(event, ui) { 
    document.location.href="newPage.html";
});

【讨论】：

所以这代替了新页面上的$(document).ready()函数？
现在，你必须在两个页面上都这样做吗？还是只是我要推的新的？
那没有成功。它可以很好地加载第一页，但不能加载第二页。
在这两种情况下，请记住，在第一个中您将进行重定向，在第二个中，当您将代码添加到新的 html 中时
也许如果你把第二页的html我可以看到问题

【解决方案2】：

Geoff，如果您使用的是 JQM 框架的 Beta 3 版本，read this。它将有助于阐明 DOM 和 $(document).ready()。您可能需要考虑“pagecreate”和“pagebeforecreate”事件。它们在上述链接中引用的文档中进行了描述。

【讨论】：

这也有助于理解原因。谢谢你。