gpt4 book ai didi

jQuery 移动 : pagecreate event does not fire when navigating from page to page

转载 作者:行者123 更新时间:2023-12-01 06:56:39 27 4
gpt4 key购买 nike

使用 2 个简单页面和 jQuery Mobile。

尝试在页面的每次加载时执行一些js。例如,第一页显示警报(1),第二页显示警报(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>
<小时/>

两个.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>

最佳答案

您应该能够仅使用一个 .live('pageinit') 自动执行此操作,如下所示。

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

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

编辑2013 年 3 月 1 日

看到其他问题被投票通过的代码无疑需要重复代码,我想更新我的答案:在 jQuery Mobile 初始化之前输入上述代码。每个页面都会在第一次加载时绑定(bind)(因此在 pageinit 事件中。您可以在 header 中进行如下设置:

    <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 才会在每次加载页面时被触发。

关于jQuery 移动 : pagecreate event does not fire when navigating from page to page,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8171251/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com