Question

玩2个简单的页面和jQuery Mobile。

尝试在页面的每个加载上执行一些js。例如，为第一页显示alert（1），为第二页显示alert（2）。首次在浏览器中加载页面（或刷新F5）时，其行为与预期一致。但是，当我使用链接从页面“一”导航到页面“二”时，警报（2）不会显示。

我想在每次加载时执行某些js的方式如下所述 - http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/api/events.html - 使用pagecreate。

我在这里发现了一些类似的问题，但他们没有回答我的需要。我的问题是 - 我应该改变什么才能让它发挥作用？

我的文件在这里：

one.html：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>1</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js"></script>
    <script>
    $('#divTestEvent1').live('pagecreate',function(event){
        alert(1);
    });
    </script>
</head> 
<body> 
    <!-- Start of first page -->
    <div data-role="page" id="divTestEvent1">
            <ul data-role="listview">
                <li><a href="one.html">1</a></li>
                <li><a href="two.html">2</a></li>
            </ul>
    </div><!-- /page -->
</body>
</html>

two.html

<!DOCTYPE html> 
<html> 
    <head> 
    <title>2</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js"></script>
    <script>
    $('#divTestEvent2').live('pagecreate',function(event){
        alert(2);
    });
    </script>
</head> 
<body> 
    <!-- Start of first page -->
    <div data-role="page" id="divTestEvent2">
            <ul data-role="listview">
                <li><a href="one.html">1</a></li>
                <li><a href="two.html">2</a></li>
            </ul>
    </div><!-- /page -->
</body>
</html>

Answer 1

您应该可以使用单个.live（'pageinit'）自动执行此操作，如下所示。

$('[data-bind="pageinit"]').live('pageinit', function (event) {
    alert( $('[data-role="page"]').attr('id') );
});

这将在使用属性data-bind='pageinit'时自动绑定页面。警报应显示页面的ID，其中必须包含data-role="page"。

编辑 2013年3月1日

看到其他问题被代码投票，毫无疑问需要重复代码我想更新我的答案：在jQuery Mobile初始化之前输入上面的代码。每个页面都会在第一次加载时被绑定（所以在pageinit事件上也是如此。你的标题中有一个类似的设置：

    <script src="Scripts/latestJQuery.js" type="text/javascript"></script>
    <script src="Scripts/jQueryMobileDefaults.js" type="text/javascript"></script>
    <script src="Scripts/latestJQueryMobile.js" type="text/javascript"></script>

上面的代码包含在默认页面中。这将使它在第一次执行时第一页被加载时也会激活。此设置将为您提供比使用每个单独页面的不同数字标识符重复代码更清晰的设置。

可以简单地改变可以使用它的事件。对于所有事件，请检查jQueryMobile documentation，但是例如：pageinit会在页面初始化时被触发，因此只有在第一次加载时，pageshow才会每次都被触发页面已加载。

Answer 2

这是因为jQuery Mobile忽略了two.html头部的脚本。请将它放在两个页面中:(或创建一个JS文件并包含在两者中）。

<script>
$('#divTestEvent1').live('pageinit',function(event){
    alert(1);
});
$('#divTestEvent2').live('pageinit',function(event){
    alert(2);
});
</script>

PS：请使用pageInit代替pagecreate 请参阅：http://jquerymobile.com/demos/1.0/docs/api/events.html

另一个选择是坚持使用当前代码，但强制执行刷新，以便执行第2页中的脚本，您可以通过设置来执行此操作：

<ul data-role="listview">
    <li><a href="one.html" data-ajax="false">1</a></li>
    <li><a href="two.html" data-ajax="false">2</a></li>
</ul>

Answer 3

pagecreate用于加载页面。然后，当您在页面之间切换时，它使用AJAX。要检测这些更改，请使用pageshow：

$('#divTestEvent1').live('pageshow',function(event){
    alert(1);
});

jQuery Mobile：在页面之间导航时不会触发pagecreate事件

我的文件在这里：

3 个答案: