我正在尝试使用mobile.changePage
打开一个包含表单的新页面,在这个新页面上,我正在绑定init
事件,就像我在许多其他问题中读到的那样。问题是我的新页面中的脚本在手动刷新页面之前不会执行。
这是我的代码,我删除了无用的部分,因为即使在以下简单版本中它仍然无效:
maptest.html页面:
<!DOCTYPE html>
<html>
<head>
<title>Mappa</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<style type="text/css">
.ui-icon-opzione {
background-image: url("img/opzione.gif") !important;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.9.1.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" charset="utf-8" type="text/javascript" src="js/maptest.js"> </script>
<!-- /DIV DELLA PAGINA -->
<div id="home-page" data-role="page" style="width:100%; height:100%;">
<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-theme="a">
<div data-role="navbar" data-iconpos="right" data-theme="a">
<ul>
<li><a data-role="button" id="apriLista" data-icon="grid">Lista</a>
</li>
<li><a href="mainmenu.html" rel="external" data-icon="home">Main Menu</a>
</li>
</ul>
</div>
<select id="opzioni-mappa" data-icon="opzione" class="ui-btn-right" data-corners="false"
data-iconpos="notext">
<option data-placeholder="true" value="Options"><b>OPZIONI</b>
</option>
<option value="segnalaServizio">Inserisci Nuovo servizio</option>
<option value="annuncioSitter">Nuovo annuncio Dog Sitter</option>
</select>
</div>
<!-- footer -->
</div>
</body>
</html>
maptest.js脚本:
// I know I shouldn't be using this, but that's not the point.
$(document).ready(function () {
$("#opzioni-mappa").change(function () {
if ($("#opzioni-mappa").val() == "segnalaServizio") {
alert("segnalaservizio");
$.mobile.changePage("formtest.html");
}
});
});
formtest.html页面:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
</head>
<style>
.ui-icon-opzione {
background-image: url("img/opzione.gif") !important;
background-repeat:no-repeat;
}
</style>
<body>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="js/formtest.js"></script>
<div data-role="page" id="inserisciServizio">
<div data-role="content">
<h3>Inserisci nuovo servizio</h3>
</div>
</div>
<!-- content -->
</div>
</body>
</html>
formtest.js脚本:
$(document).bind("pageinit", function() {
alert("page opened");
});
警报不会显示。