Jquery Mobile“pageinit”没有触发
Posted
技术标签:
【中文标题】Jquery Mobile“pageinit”没有触发【英文标题】：Jquery Mobile "pageinit" not firing 【发布时间】：2012-04-23 13:25:15 【问题描述】：我正在尝试将 Geolocation API 与 Jquery Mobile 一起使用。如果我从浏览器直接浏览到我的页面，一切正常。
但是，如果我从另一个页面导航到它，它不会加载。
另外，如果我使用“pageinit”命令删除该行代码，我会遇到同样的问题/错误，但如果我刷新页面，它将加载。
我知道这与通过 AJAX 处理 DOM 的方式有关，但我似乎无法让它按照它应该/我想要的方式工作。
<!DOCTYPE html>
<html>
<head>
<title>My Location</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page" id="geoPage">
<script type="text/javascript">
$("#geoPage").live("pageinit", function()
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(success, error);
else
error('Geolocation not supported');
);
function success(position)
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions =
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: style: google.maps.NavigationControlStyle.SMALL,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
var mapcanvas = $('#mapcanvas');
var map = new google.maps.Map(mapcanvas[0], myOptions);
var marker = new google.maps.Marker(
position: latlng,
map: map,
title:"I am here!"
);
//alert(latlng);
function error(msg)
var errMsg = typeof msg == 'string' ? msg : "Geolocation failed";
$('#msg').html(errMsg);
$("#continue7").click(function(e)
$.mobile.changePage( "extension.htm", transition: "slide" );
);
</script>
<div data-role="header">
<h1>My Location</h1>
</div>
<div data-role="content">
<div id="msg"></div>
<div id="mapcanvas" style="height: 250px; width:250px;"></div>
<input id="continue7" type="button" value="Conintue" />
</div>
</div>
</body>
</html>
【问题讨论】：
您正在使用很久以前发布的 alpha 版本。将您的依赖项更新到最新的 jQM 1.1.0 版本和 jQuery 1.6/1.7！ 查看这篇文章。它对我有用***.com/questions/15848352/… 【参考方案1】：关于如何处理 pageinit 事件的documentation 与您的方法略有不同——至少是我正在查看的文档部分。他们的建议是你可以这样编码：
$( document ).delegate("#geoPage", "pageinit", function()
// Handle it
如果您想以这种方式绑定，文档听起来好像您已将函数放置在最佳位置。
编辑：
值得注意的是，this particular page 完全如您所展示的那样描述了绑定（但将event 添加到我认为不会影响您的情况的匿名函数中）。这让我相信，当您从另一个页面导航时，您的开发者工具控制台中可能会出现 javascript 错误，并且该页面会出现“不工作”的外观。请务必在您选择的开发人员工具中进行检查。
编辑：
您的解决方案是您需要在 data-role='page' 元素中的某处包含您的 google maps javascript 'include'。每次加载 AJAX 页面时，Jquerymobile 都会忽略除此之外的所有内容。或者，您可以将所有指向此页面的链接转换为data-ajax="false"。
在您的 data-role="page" 的 inside 中包含以下行，或将其包含在每个页面的 html <head> 中。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
一定要认真阅读并让原始链接沉入其中。最佳做法是每个页面都有相同的<head> 元素并包含它而不是复制粘贴它。
【讨论】：
感谢您的帮助。使用您建议的代码，我得到完全相同的行为。但是，我只是试图用 chrome 调试我的 javascript，它说 google 没有定义。但它应该从头部的脚本中定义。我也尝试将该脚本移动到我的页面中，但我得到了同样的错误...... 我修好了。一旦我得到错误，我意识到它没有在页面转换时加载我的脚本。因此，我将 API 的包含移到了我的索引文件中。这样，它将与 DOM 一起加载。我可以稍后访问它。我不确定这是否是我应该这样做的方式，但它有效。请告知这是否是一种不受欢迎的方法。另外，由于您让我的大脑朝着正确的方向旋转，因此授予您的答案作为我的解决方案。 一般来说，每个页面都应该有相同的<html><head></head> 段。这基本上是 jquerymobile 将要假设的。页面的这些部分只会被加载一次——无论用户首先访问哪个页面。因此，如果需要在一个页面上包含特定于页面的元素（如google，此处），请确保将其包含在inside data-role="page"。请务必阅读第一个文档链接以获得最佳实践。谢谢
@user1289451;更新了我的答案以反映您遇到的情况。在你去的时候保持开发者工具打开；这将是一个祝福！
如何在每一页中包含头部？我还没有找到合适的方法来做到这一点。我知道它可以用于 Javascript，但是 HTML 元素呢？我读过使用 Javascript 的 .write 函数的解决方法，但我觉得必须这样做很奇怪......以上是关于Jquery Mobile“pageinit”没有触发的主要内容，如果未能解决你的问题，请参考以下文章