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内容，页面显示已经完成，此时主题设置了，但是没有刷新，所以页面显示上也就无效。

js中ready()中函数和外面的区别

相关推荐