您的位置：首页 > Web前端 > JQuery

jQuery Mobile页面跳转后未加载JS解决办法

2016-12-10 16:57 501 查看

开发中遇到一个情况，网站采用jquery mobile风格开发由医院列表跳转到医院详情时出现问题，数据加载不上（医院详情采用js加载填充数据）医院列表亦采用ajax异步加载，页面效果如下：

医院链接采用<a href=""></a>方式实现，无法加载到数据，后台查询也调用了，发现医院详情页面js并未执行，刷新后正常显示，页面效果如下：

相关代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="./css/jquery.mobile-1.3.2.min.css">
<script src="./script/jquery-1.8.3.min.js"></script>
<script src="./script/jquery.mobile-1.3.2.min.js"></script>

<script src="./script/hospitals.js"></script>
<script>
var resp = <%=(JSONObject)request.getAttribute("resp")%>;
loadHospitalInfo(resp)
</script>
<title>医院详情</title>
</head>
<body>
<div data-role="header" id="header_div">
<a href="javascript:history.go(-1)" data-icon="arrow-l" data-iconpos="notext">返回</a>
<h1 id="title_name">医院详情页</h1>
</div>
<div id="content">
</div>
</body>
</html>

解决办法：将上面js代码写入到body中：

<body>
<script>
var resp = <%=(JSONObject)request.getAttribute("resp")%>;
loadHospitalInfo(resp)
</script>
<title>医院详情</title>
<div data-role="header" id="header_div">
<a href="javascript:history.go(-1)" data-icon="arrow-l" data-iconpos="notext">返回</a>
<h1 id="title_name">医院详情页</h1>
</div>
<div id="content">
</div>
</body>

问题解决。
原因分析：JQM并为将整个页面加载到当前的dom中，仅将data-role="page"元素加入当前的dom中

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航