logo标签列表

Jquery Mobile - $(document).ready未触发

javascriptjqueryhtmljquery-mobile
4

我有一个listview，其中每个组件都连接到一个像这样的单击函数：

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函数中有什么内容，你想用它做什么？ - yoozer8
还有另一个函数会触发一个 AJAX 请求，以获取表单的 UI 组件。 - gabaum10
在Firebug中，我无法看到该页面关联的JS文件或任何内容。我认为它们没有被加载... - gabaum10
2个回答
5
您不能使用 $(document).ready() 启动jQuery移动端，您应该像这样启动：

尝试在第一个HTML中使用此方法

$("div[data-role*='page']").live('pageshow', function(event, ui) { 
    document.location.href="newPage.html";
});
现在，您必须在两个页面上都这样做吗？还是只需要在我正在推送的新页面上进行操作？ - gabaum10
那没起作用。它可以正常加载第一页，但无法加载第二页。 - gabaum10
也许如果你放第二个页面的HTML代码，我就能看到问题。 - Jorge
没错，但在第二个文件中，它甚至看起来都没有加载其他任何文档。例如，应该加载一个JS文件，但在firebug中没有显示出来... - gabaum10
你想看 HTML 的哪个部分？如果是的话，我有一个 data-role 为 page 的 div。 - gabaum10
显示剩余6条评论
3

Geoff，如果你正在使用JQM框架的Beta 3版本，阅读此文。它将帮助你了解DOM和$(document).ready()。你可能需要考虑"pagecreate"和"pagebeforecreate"事件。它们在上面链接中引用的文档中有详细说明。

这也有助于理解为什么。谢谢。 - gabaum10
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接