关闭多个选择对话框的JQM将复制浏览器后退按钮事件

时间:2013-02-16 22:53:55

标签: jquery jquery-mobile multi-select

它现在3天我试图绕过这个pb,在网上搜索和SO。

问题:从第1页转到第2页,然后转到第3页,在第3页打开多重选择并关闭它。然后按浏览器后退按钮返回到第2页...并立即返回到第1页(就像按下后退按钮两次一样)。多重选择必须全屏显示pb,这解释了为什么我的样本有这么多<option>

我在这3个html文件中分离了pb:

page1.html

<html>
<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    </head>
<body>
    <div data-role="page" id="page1">
        <div data-role="content">
            Page 1
            <a data-role="button" href="page2.html">Go to page 2</a>
        </div>
    </div>
</body>

page2.html

<div data-role="page" id="page2">
    <div data-role="content">
        Page 2
        <a data-role="button" href="page3.html">Go to page 3</a>
    </div>
</div>

page3.html

<div data-role="page" id="page3">
<div data-role="content">
    Page 3
    <div data-role="fieldcontain">
        <select data-native-menu="false" multiple="multiple">
           <option>Open Multi-select</option>
           <option value="0">00</option>
           <option value="1">01</option>
           <option value="2">02</option>
           <option value="3">03</option>
           <option value="4">04</option>
           <option value="5">05</option>
           <option value="6">06</option>
           <option value="7">07</option>
           <option value="8">08</option>
           <option value="9">09</option>
           <option value="10">10</option>
           <option value="11">11</option>
           <option value="12">12</option>
           <option value="13">13</option>
           <option value="14">14</option>
           <option value="15">15</option>
           <option value="16">16</option>
           <option value="17">17</option>
           <option value="18">18</option>
           <option value="19">19</option>
           <option value="20">20</option>
           <option value="21">21</option>
           <option value="22">22</option>
           <option value="23">23</option>
           <option value="24">24</option>
           <option value="25">25</option>
           <option value="26">26</option>
           <option value="27">27</option>
           <option value="28">28</option>
           <option value="29">29</option>
           <option value="30">30</option>
           <option value="31">31</option>
           <option value="32">32</option>
           <option value="33">33</option>
           <option value="34">34</option>
           <option value="35">35</option>
           <option value="36">36</option>
           <option value="37">37</option>
           <option value="38">38</option>
           <option value="39">39</option>
           <option value="40">40</option>
           <option value="41">41</option>
           <option value="42">42</option>
           <option value="43">43</option>
           <option value="44">44</option>
           <option value="45">45</option>
           <option value="46">46</option>
           <option value="47">47</option>
           <option value="48">48</option>
           <option value="49">49</option>
           <option value="50">50</option>
           <option value="51">51</option>
           <option value="52">52</option>
           <option value="53">53</option>
           <option value="54">54</option>
           <option value="55">55</option>
           <option value="56">56</option>
           <option value="57">57</option>
           <option value="58">58</option>
           <option value="59">59</option>
       </select>
   </div>
   Once closed, press browser back button
</div>

出于某种原因,在处理单页模板时,pb不可重现。这是jsfiddle

先谢谢你的帮助!!

1 个答案:

答案 0 :(得分:0)

使用JQuery Mobile 1.3.0无法重现该问题:

<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>