First, I am sorry for my poor English...
Now I doing PhoneGap development. I want to use the JQuery's API .html() or .empty() to constantly changing the contents of a div.When I use the .html() and click the button in first time, everything are work good! But when I click the button in second time, I found the jquery.js or jquery-mobile.js invalid, because I found the Tag's class are all missing(like 'class="ui-listview"'),so the styles is very awful. And later I try the empty() + append(), but this situation is the same with above.
finally,I only use the append(),It's work perfect, but it not match my requirements,because it will constantly cover the content in my div.
Can anyone help me? I will be grateful!
This is my code
<!DOCTYPE html>
<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">
<title>demo</title>
<link rel="stylesheet" href="jquery.mobile-1.0.css" />
<link rel="stylesheet" href="css/chui.css"/>
<link rel="stylesheet" href="index.css"/>
<script type="text/javascript" charset="utf-8" src="js/phonegap-1.3.0.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<!--home page-->
<div data-role="page" id="schedule">
<div data-role="header" data-theme="b">
<h1>demo</h1>
</div>
<div id="wrapper1">
<div id="scroller">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="d" class="ulspan">
<li><a id="carrier-btn">Carrier<span></span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div data-role="page" id="next-page">
</div>
</body>
</html>
This my .js
$('#carrier-btn').live('click',function(){
$("#next-page").html("Hellow");
$.mobile.changePage($("#next-page"), {transition:'slide'});
})
another issue:
<script type="text/template" id="page-template">
<!--origin city-->
<div data-role="page" id="origin">
<div data-role="header" data-theme="b">
<a href="#schedule" data-direction="reverse" data-corners="false" class="navbar-btn back-btn" style="border-radius:5px; left:18px;">Back</a>
<h1>Origin City</h1>
</div>
<div data-role="content" style="margin-top:-2px">
<div class="search">
<input type="search" name="originCity" id="oriCity" onkeyup="searchCity('ori')" value="" />
</div>
<div id="wrapper3">
<div id="scroller">
<ul data-role="listview" id="oriCity" data-theme="f">
<li data-role="list-divider">Recent Search</li>
</ul>
</div>
</div>
</div>
</div>
</script>
I found this back button is invalid, what should i do??
