Question

我遇到了使用JQuery mobile和多个页面的问题：从#first页面我转到#second，我有一个选择不同的选项，我必须根据选择更新#second页面...所以没有问题，它似乎工作正常，但有一种罕见的行为，我无法避免任何方式：如果我在两页之间前进和后退，当我在#second页面中更改选择我有的东西我回到#first页面的次数重复了。

试试这个jsfiddle here：

转到#second页面
更改选项：一个警告弹出
返回#first页面
再次访问#second页面
再次更改选项：两个警告弹出!!!

等等......

<!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>

JS

     $(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…
       });
     });

Answer 1

当然，由于您在pagebeforeshow事件中添加了事件，因此会出现此行为。这意味着每次显示页面时，都会设置事件。

您需要记住，所有jQuery事件函数都不是设置，而是添加事件。因此，您可以将$(document).on('pagebeforeshow', '#second'部分替换为$(document).ready(

JQuery Mobile多页面模板的问题

1 个答案: