无页面更改事件触发
在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应用程序中的其他区域导航时则不会收到相应的警报。
页面由页脚中的"Your Car“选项卡调用
<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>回答 3
Stack Overflow用户
发布于 2012-01-28 00:09:32
把你的代码放在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>Stack Overflow用户
发布于 2012-01-27 22:03:38
您将在何处绑定到此事件？
您是否在Docs http://code.jquery.com/mobile/latest/demos/docs/api/events.html中阅读了以下内容
文档要点:使用pageInit()，而不是$(
).ready()
在jQuery中学到的第一件事就是在$(document).ready()函数中调用代码，以便加载DOM后立即执行所有操作。但是，在jQuery Mobile中，Ajax用于在导航时将每个页面的内容加载到DOM中，并且DOM就绪处理程序只对第一个页面执行。若要在加载和创建新页时执行代码，可以绑定到pageinit事件。此事件的详细说明在此页面的底部。
Stack Overflow用户
发布于 2013-01-07 03:41:06
Luke的想法是正确的:很明显，您遇到的问题与绑定在代码中发生的位置有关。shanabus证明了这一点。
然而，在您的例子中，您应该在jQuery手机的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移动<script>标记之前。
https://stackoverflow.com/questions/9034272
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号