Jquery Mobile mobile.changePage,新页面绑定到“init”事件

时间:2013-07-13 12:28:03

标签: javascript jquery jquery-mobile cordova

我正在尝试使用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");

}); 

警报不会显示。

0 个答案:

没有答案