Во-первых, я извиняюсь за мой плохой английский ...
Сейчас я занимаюсь разработкой PhoneGap.
Я хочу использовать API JQuery .html () или .empty () для постоянного изменения содержимого div. Когда я использую .html () и нажимаю кнопку в первый раз, все работает хорошо! Но когда я нажимаю кнопку во второй раз, я обнаружил, что jquery.js или jquery-mobile.js недействительны, потому что я обнаружил, что все классы тега отсутствуют (например, 'class = "ui-listview"), поэтому стили очень ужасно
А позже я пробую empty () + append (), но эта ситуация такая же, как и выше.
наконец, я использую только append (), он отлично работает, но не соответствует моим требованиям, потому что он будет постоянно покрывать содержимое моего div.
Кто-нибудь может мне помочь?
Буду благодарен!
Это мой код
<!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>
Это мой .js
$('#carrier-btn').live('click',function(){
$("#next-page").html("Hellow");
$.mobile.changePage($("#next-page"), {transition:'slide'});
})
другая проблема:
<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>
Я обнаружил, что эта кнопка возврата недействительна, что мне делать ??