Question

我是jquery-mobile的新手。有人可以帮助解决有关多页面应用的以下问题吗？

我的应用有两个页面，分为两个不同的文件 - index2_1.html和index2_2.html，如下所示。当我使用$ .mobile.changePage（“index2_2.html”，“slide”）;要切换到第二页，第二页中的所有事件都不会被绑定。实际上，第二页上的Javascript都没有被执行。但是，如果使用链接

移至第二页

<a href="index2_2.html" target="_blank">Link to 2nd page that works1</a>

它工作正常。

有人可以告诉我这里我做错了吗？

谢谢，迪利普

index2_1.html

<!DOCTYPE html>
<html>
<head>
<title>Account Diary Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

<script>
    alert("Trying to register events on page 1.");
    $(function() {
        $(".category_item").bind("tap", function(event) {
            selected_category = $(this).text();
            $("#selected_category").text(selected_category);
            $.mobile.changePage("index2_2.html", "slide");
        });
    });
</script>
</head>
<body> 
<div data-role="page" id="select_category">
<div data-role="header" data-backbtn="false">
    <h1>Select Category</h1>
</div><!-- /header -->

<div data-role="content">
    <ul data-role="listview" data-theme="g">
        <li class="category_item"><a href="">Grocery</a></li>
        <li class="category_item"><a href="">Car</a></li>
        <li class="category_item"><a href="">Recreation</a></li>
        <li class="category_item"><a href="">Health</a></li>
    </ul>
    <div>
    <a href="index2_2.html" target="_blank">Link to 2nd page that works1</a>
    </div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

index2_2.html

<!DOCTYPE html>
<html>
<head>
<title>Account Diary Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

<script>
    alert("Trying to register events on page 2.");
    $(function() {
        $(".description_item").bind("tap", function(event) {
            selected_description = $(this).text();
            $("#expense_description").val(selected_description); 
            description = $("#expense_description").val();
            $.mobile.changePage($("#enter_amount"), "slide");
        });
    });

</script>

</head>
<body> 

<div data-role="page" id="enter_description">

<div data-role="header" data-backbtn="false">
    <h1>Enter/Select Description</h1>
</div><!-- /header -->

<div data-role="content">
    <label for="name">Description:</label>
    <input type="text" name="expense_description" id="expense_description" value=""  />
    <a id="n_button" href="#" data-role="button" data-theme="b" data-inline="true" >Next</a>

    <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
        <li data-role="list-divider">Recent Expenses</li>
        <li><a class="description_item" href="">Safeway</a></li>
        <li><a class="description_item" href="">Gas</a></li>
        <li><a class="description_item" href="">Cell phone bill</a></li>
        <li><a class="description_item" href="">rent</a></li>
    </ul>

     <div data-role="controlgroup" data-type="horizontal">
        <center>
            <a class="cancel_button" href="index.html" data-role="button" rel="external">Cancel</a>
        </center>
    </div>

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

</body>
</html>

Answer 1

与Pravat Maskey的回答相反，有可能（并且也取决于用例也是如此）具有单独的HTML文件。想象一下拥有大量页面的庞大应用程序，预先加载所有内容都是违反直觉的。

我认为您遇到的问题是JavaScript代码的放置。我会尝试在页面部分中，在页面的结尾div上方包含页面特定代码（脚本标记及其包含的所有内容）。有关更多详细信息，请查看本指南：http://jqx.ca/nav/，并查看“jQuery Mobile Pages中的脚本”部分。

通过在正文中添加标记，您的代码将在首次创建子页面时执行一次。对于您的情况，这应该有效，因为您将事件绑定到DOM节点，该节点只需运行一次。

如果您希望每次显示页面时都运行它，您也可以尝试使用pagebeforeshow事件注册代码。

在多页jquery-mobile应用程序中注册事件？

1 个答案: