没有 pagechange 事件触发答案

【问题标题】：No pagechange event firing没有 pagechange 事件触发
【发布时间】：2012-01-27 13:55:37
【问题描述】：

在 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>

【问题讨论】：

你是如何触发页面变化的？你能包括一些你的代码吗？
已经在问题中更明确地说明了这一点，谢谢。
您尝试过pageshow 或pagebeforeshow 页面转换事件吗？ jQM 文档：jquerymobile.com/demos/1.0.1/docs/api/events.html

标签： javascript jquery events mobile jquery-mobile

【解决方案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>

【讨论】：

我的解决方案之类的，但它是一个 hack，而不是真正的解决方案。
在测试了一下之后，我的解决方案也不能很好地工作。如果您声明脚本类型 - type="text/jasvascript" 会有帮助吗？
该死，笔记本电脑在工作，我真的很想试试这个！！将在星期一报告

【解决方案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 事件。此事件在本页底部有详细说明。

【讨论】：

我也没有使用。测试过 pageinit，它似乎并没有更好地工作，并且在阅读文档时，似乎 pagechange 是我想要的
@MildFuzz 我想说的是，也许你在那里绑定到你的事件，它是早期......

【解决方案3】：

Luke 的想法是正确的：很明显，您遇到的问题与代码中发生绑定的位置有关。 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> 标记。

【讨论】：