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

最新推荐文章于 2023-07-06 15:41:42 发布

清山随笔

最新推荐文章于 2023-07-06 15:41:42 发布

阅读量1.1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/linfenliang/article/details/53559624

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

开发中遇到一个情况，网站采用jquery mobile风格开发

由医院列表跳转到医院详情时出现问题，数据加载不上（医院详情采用js加载填充数据）

医院列表亦采用ajax异步加载，页面效果如下：

jQuery Mobile页面跳转后未加载JS解决办法 - 断鸿零雁 - 断情阁

医院链接采用<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中

清山随笔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery Mobile页面跳转后未加载JS解决办法

开发中遇到一个情况，网站采用jquery mobile风格开发由医院列表跳转到医院详情时出现问题，数据加载不上（医院详情采用js加载填充数据）医院列表亦采用ajax异步加载，页面效果如下：医院链接采用方式实现，无法加载到数据，后台查询也调用了，发现医院详情页面js并未执行，刷新后正常显示，页面效果如下：相关代码如下：var resp = ;loadHospitalInfo(resp)医院详情
复制链接

扫一扫