Javascript JQuery移动多页模板的问题_Javascript_Jquery_Html_Mobile

Javascript JQuery移动多页模板的问题

javascript jquery html mobile

Javascript JQuery移动多页模板的问题,javascript,jquery,html,mobile,Javascript,Jquery,Html,Mobile,我在使用JQuery mobile和多个页面时遇到了一个问题：从#第一个页面到#第二个页面，我有一个带有不同选项的选择，我必须根据选择更新#第二个页面……到目前为止没有问题，它似乎工作正常，但有一种罕见的行为是我无法避免的：如果我在两页之间来回移动，当我在第二页中更改选择时，我必须做的事情会重复到第一页试试这个JSFIDLE：转到第二页更改选项：one弹出警报回到第一页再次转到第二页再次更改选项：弹出两个警报等等… 当然，它会有这种行为，因为您已经在pagebeforeshow事

我在使用JQuery mobile和多个页面时遇到了一个问题：从#第一个页面到#第二个页面，我有一个带有不同选项的选择，我必须根据选择更新#第二个页面……到目前为止没有问题，它似乎工作正常，但有一种罕见的行为是我无法避免的：如果我在两页之间来回移动，当我在第二页中更改选择时，我必须做的事情会重复到第一页

试试这个JSFIDLE：

转到第二页

更改选项：one弹出警报

回到第一页

再次转到第二页

再次更改选项：弹出两个警报

等等…

当然，它会有这种行为，因为您已经在pagebeforeshow事件中添加了事件。这意味着每次显示页面时，都会设置事件

您需要记住，所有jQuery事件函数都不会设置，而是添加事件。因此，您可以将（'pagebeforeshow'，'#second'部分替换为

$（文档）。准备好了吗（

我不明白你的问题。你能告诉我你的实际问题吗。我不能回到那把小提琴的第一页。我遗漏了什么吗？使用

pagecreate

而不是

pagebeforeshow

。使用第一个来添加侦听器。使用第二个来操作DOM，例如显示/隐藏元素等。。

<!DOCTYPE html>
   <title>Page Title</title>
   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
   <link type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" />
   <script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<body>
    <div data-role="page" id="first" data-theme="b">
        <div data-role="header">
            <h1>Page Title1</h1>
        </div><!-- /header -->

        <div data-role="content">
            <p>Page content goes here.</p>
            <a href="#second">Go to second page</a>
        </div><!-- /content -->

        <div data-role="footer">
            <h4>Page Footer1</h4>
        </div><!-- /footer -->
    </div><!-- /page -->

    <div data-role="page" id="second" data-add-back-btn="true" data-theme="b">
        <div data-role="header">
            <h1>Page Title2</h1>
        </div><!-- /header -->

        <div data-role="content">
            <p>
                <select name="listtemp" id="listtemp" data-native-menu="false">
                <option value ='1'>option 1</option>
                <option value ='2'>option 2</option>
                <option value ='3'>option 3</option>
        </select>
            </p>
        </div><!-- /content -->

        <div data-role="footer">
            <h4>Page Footer2</h4>
        </div><!-- /footer -->
    </div><!-- /page -->
 </body>
 </html>

     $(document).on('pagebeforeshow', '#second', function(){   
       $('#listtemp').change(function() {
         alert('change option');
         //Do my stuff here when changing option
         //This code is done as times as times I go back first page…
       });
     });