js中ready()中函数和外面的区别
今天测试jQuery Mobile的主题功能时，动态改变它的theme，出现总是没有更新主题效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.0-beta.1.min.css" />
<script type="text/javascript" src="js/fastclick.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.0-beta.1.min.js"></script>
<script type="text/javascript">
$(function(){
var selTheme = $("#selTheme");
selTheme.bind("change",function(){
if(selTheme.val()!=""){
$.cookie("StrTheme",selTheme.val(),{
path:"/weixin",
expires:1
})
window.location.reload();
}
});
});
/*
该段代码放在ready里面，则只有第一次生效，因为放在ready里面就意味着要等DOM加载完成在执行，
此时页面已经加载了一种主题，再执行该段代码更换另一宗主题，但是没有刷新，所以页面在显示上就没有变化过来
*/
if($.cookie("StrTheme")){
alert($.cookie("StrTheme"));
$.mobile.page.prototype.options.headerTheme = $.cookie("StrTheme");
}
</script>
<base>
<title>jqueryMobile_3</title>
</head>
<body>
<!-- 页面一 -->
<div data-role="page" id="page1">
<div data-role="header">
<h1>雾烨</h1>
<div data-role="navbar">
<ul>
<!-- 添加样式， class="ui-btn-active" 表示该按钮是活动的 -->
<li><a href="index.html" data-iconpos="top" data-icon="search">Search</a></li>
<li><a href="index.html" data-iconpos="top" data-icon="home">Home</a></li>
<li><a href="jqueryMobile_4.html" data-iconpos="top" data-icon="info">More</a></li>
</ul>
</div>
</div>
<div data-role="content">
<select id="selTheme" data-native-menu="false">
<option value="">选择主题</option>
<option value="a">主题a</option>
<option value="b">主题b</option>
<option value="c">主题c</option>
<option value="d">主题d</option>
<option value="e">主题e</option>
</select>
</div>
<div data-role="footer">
<h2>©2015 ripin.com test</h2>
</div>
</div>
</body>
</html>将该段代码
if($.cookie("StrTheme")){
alert($.cookie("StrTheme"));
$.mobile.page.prototype.options.headerTheme = $.cookie("StrTheme");
}放到ready()外，问题解决，此刻才深刻理解到先加载完DOM再 执行ready中的函数的意思。这里的主题无效也是因为已经加载完dom内容，页面显示已经完成，此时主题设置了，但是没有刷新，所以页面显示上也就无效。
相关推荐
Zhongmeishijue 2020-09-10
runner 2020-09-01
梦的天空 2020-08-25
IdeaElements 2020-08-19
luvhl 2020-08-17
移动开发与培训 2020-08-16
ReunionIsland 2020-08-16
lyqdanang 2020-08-16
NARUTOLUOLUO 2020-08-03
MyNameIsXiaoLai 2020-07-08
星辰的笔记 2020-07-04
csstpeixun 2020-06-28
letheashura 2020-06-26
liaoxuewu 2020-06-26
OldBowl 2020-06-26
北京老苏 2020-06-25
Luffyying 2020-06-25