Question

在jQuery mobile中，我试图检测到特定页面的成功页面更改。我有以下代码，内联在我要加载的页面上。

<script>
     $(document).bind( "pagebeforechange", function( e, data ) {
            alert("pagebeforechange");   
        });

        $(document).bind( "pagechange", function( e, data ) {
            alert("pagechange");   
        });
        $(document).bind( "pagechangefailed", function( e, data ) {
            alert("pagechangefailed");   
        });
       $(document).live( "pagebeforechange", function( e, data ) {
            alert("pagebeforechange live");   
        });

        $(document).live( "pagechange", function( e, data ) {
            alert("pagechange live");   
        });
        $(document).live( "pagechangefailed", function( e, data ) {
            alert("pagechangefailed live");   
        });
</script>

我在直接加载页面或刷新时收到相应的警报，但在从Jquery Mobile应用程序中的其他区域导航时却没有。

页面由页脚中的“您的汽车”标签调用

<div  id="footer" data-role="footer" data-position="fixed"> 
    <div data-role="navbar">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="index.html">Features</a></li>
            <li><a href="about.html">Your Car</a></li>
            <li><a href="index.html">Contact</a></li>
        </ul>
    </div>
</div>

Answer 1

将代码置于pageshow事件中是否有效？如果您尝试检测页面或位置，则可能。这样的事情可能是：

<script type="text/javascript">

$('[data-role=page]').live('pageshow', function (event, ui) {
   hash = location.hash;
   page = hash.susbtr(1);

   if (page.indexOf('about.html') >= 0) { 
      alert('you made it!'); 
   }
});

</script>

<强>更新

在测试了这个场景并重新阅读您的问题之后，我想我能够重现结果。

这可以按照您的描述工作，只在直接加载页面或刷新页面时触发警报：

<body>

<div data-role="page">
    <!-- page stuff -->
</div> 

<script type="text/javascript"> ..bind events... </script>
</body>

但是，当我直接在页面内移动javascript时，它会按预期工作并触发所有绑定事件，无论页面如何到达：

<body>

<div data-role="page">

    <script type="text/javascript"> ..bind events... </script>

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

</body>

Answer 2

你在哪里绑定这个事件？

您是否在文档http://code.jquery.com/mobile/latest/demos/docs/api/events.html中阅读了以下内容：

重要提示：使用pageInit（），而不是$（document）.ready（）

你在jQuery中学到的第一件事就是在里面调用代码   $（document）.ready（）函数，所以一切都会尽快执行   DOM已加载。但是，在jQuery Mobile中，Ajax用于加载   导航时每个页面的内容都放入DOM中，并准备好DOM   处理程序仅对第一页执行。每当执行代码时   加载并创建新页面，您可以绑定到pageinit事件。   此事件在本页底部详细说明。

Answer 3

卢克的想法是正确的方向：显然你遇到的问题与代码中绑定发生的位置有关。这是由shanabus证明的。

但是，在你的情况下，你应该在jQuery mobile的mobileinit事件被触发时进行绑定，而不是像Luke建议的那样pageInit。

示例（触发所有页面更改事件）：

<script type="text/javascript">
    $(document).bind('mobileinit', function() {
        $(document).on('pagechange', function () {
            window.alert('page changed!');
        });
    });
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>

如上面的代码所示，请注意mobileinit触发的处理程序必须包含在之前 jQuery mobile <script>标记。

没有页面更改事件触发

3 个答案: