我发现我的 jquery 移动应用程序发生了奇怪的行为。我不知道会发生什么，因为我将默认结构放在其他页面中，但无法访问它们。我做了一些测试，问题出在这里:
<div id="ctn">
<h3>Find it Us</h3>
<section id="gmap">
<script>
new GMaps({
div: '#map',
lat: -34.6117611,
lng: -58.4418745
});
</script>
</section>
<section id="contact-form">
<h3>Contact Us</h3>
</section>
</div>
当我点击导航栏(联系人)时:
<ul data-role="listview" data-inset="true">
<li data-icon="false"><a href="index.html" data-transition="flip">Home</a></li>
<li data-icon="false"><a href="nosotros.html" data-transition="flip">About US</a></li>
<li data-icon="false"><a href="servicios.html" data-transition="flip">Services</a></li>
<li data-icon="false"><a href="portfolio.html" data-transition="flip">Portfolio</a></li>
**<li data-icon="false"><a href="contacto.html" data-transition="flip">Contact</a></li>**
</ul>
页面显示预加载，应用程序终止
页面完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<link rel="stylesheet" href="template/css/mobile.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script src="https://raw.githubusercontent.com/HPNeo/gmaps/master/gmaps.js"></script>
<title>xa - Contact</title>
</head>
<body>
<div data-role="page" id="contact">
<header id="header" data-role="header" data-position="fixed">
<a href="index.html" class="ui-btn ui-icon-carat-l ui-nodisc-icon ui-btn-icon-notext" data-transition="slide">Search</a>
<div id="branding">
<h1>xa</h1>
</div>
<a href="#" class="ui-btn ui-icon-home ui-nodisc-icon ui-btn-icon-notext">Home Button</a>
</header>
<div data-role="content" id="index" class="ui-content">
<div id="nheader">
<h3>Contact</h3>
</div>
<div id="ctn">
<h3>Find it US</h3>
<section id="gmap">
<script>
new GMaps({
div: '#map',
lat: -34.6117611,
lng: -58.4418745
});
</script>
</section>
<section id="Contact-form">
<h3>Contact Us</h3>
</section>
</div>
<footer data-role="footer" data-position="fixed">
<p>Copyright 2014 xa.<br /> All rights reserved</p>
</footer>
</div>
</div>
</body>
</html>
非常感谢您的帮助。谢谢!
最佳答案
由于缺少 google map api，存在一些脚本错误，根据您的标记和脚本，页面应该有一个 id="map"的 div
这是 js-bin :http://jsbin.com/wosuta/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<link rel="stylesheet" href="template/css/mobile.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="https://raw.githubusercontent.com/HPNeo/gmaps/master/gmaps.js"></script>
<title>xa - Contact</title>
</head>
<body>
<div data-role="page" id="contact">
<header id="header" data-role="header" data-position="fixed">
<a href="index.html" class="ui-btn ui-icon-carat-l ui-nodisc-icon ui-btn-icon-notext" data-transition="slide">Search</a>
<div id="branding">
<h1>xa</h1>
</div>
<a href="#" class="ui-btn ui-icon-home ui-nodisc-icon ui-btn-icon-notext">Home Button</a>
</header>
<div data-role="content" id="index" class="ui-content">
<div id="nheader">
<h3>Contact</h3>
</div>
<div id="ctn">
<h3>Find it US</h3>
<div id="map">Test Map Here</div>
<section id="gmap">
<script>
new GMaps({
div: '#map',
lat: -34.6117611,
lng: -58.4418745
});
$("#map").width("99%").height("20em");
</script>
</section>
<section id="Contact-form">
<h3>Contact Us</h3>
</section>
</div>
<footer data-role="footer" data-position="fixed">
<p>Copyright 2014 xa.<br /> All rights reserved</p>
</footer>
</div>
</div>
</body>
</html>
关于javascript - 无法访问 jquery mobile 中的联系页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26247111/