2

当用户从jQuery Mobile<select>的菜单中选择一个选项时，我在尝试重定向到另一个页面时遇到问题。

下面是一个非常小的示例，类似于我正在尝试做的事情，它展示了我遇到的问题。The problem is that when the list of options is too big to fit on the screen, the redirect does not work. It works fine when the options fit on the screen. （您可以通过将窗口设置得非常小，在桌面浏览器中重现这一点。）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery Mobile Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
  <script>
    $(function () {
      $('#mySelect').bind('change', function () {
        // The actual logic for building the URL is more complicated, obviously.
        // This is just an example.
        var url = 'jquery-mobile-test.html?param=' + this.value;
        location.href = url;
      });
    });
  </script>
</head>
<body>
  <div data-role="page" class="type-home">
    <div data-role="content">
      <div data-role="fieldcontain">
        <select data-native-menu="false" name="param" id="mySelect">
          <option>Select an Option...</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
          <option value="4">Four</option>
          <option value="5">Five</option>
          <option value="6">Six</option>
          <option value="7">Seven</option>
          <option value="8">Eight</option>
          <option value="9">Nine</option>
          <option value="10">Ten</option>
        </select>
      </div>
    </div>
  </div>
</body>
</html>

jQuery Mobile Docs的一些背景：

当select设备屏幕上有少量选项时，菜单将显示为带有弹出过渡的小叠加层。[...] 当设备屏幕上显示的选项太多时，框架将自动创建一个新的“页面”，其中填充了选项的标准列表视图。这允许我们使用设备中包含的本机滚动来移动长列表。标签内的文本用作此页面的标题。

当它创建新的“页面”时，它会添加#&ui-state=dialog到URL的末尾，然后选择选项时，它会更改URL。我认为这是干扰我正在尝试执行的重定向的原因。

有关解决此问题的最佳方法的任何建议？

编辑#1：我应该提到我无法使用$.mobile.changePage()，因为我重定向到的页面做了一些奇怪的重定向，它自己的重定向弄乱了转换。很抱歉，示例中没有表示这一点。

编辑#2：我在上面粘贴了我的代码（而不是使用要点），以便人们可以通过搜索更轻松地找到这个问题。

4

3 回答 3

3

我想通了，所以我正在回答我自己的问题。

这是为我修复它的代码：

var url = 'redirect-to-this-page.html',
    $dialog = $('div.ui-page.ui-dialog.ui-page-active');

if ($dialog.length > 0) {
    $dialog.bind('pagebeforehide', function () {
        location.href = url;
    });
} else {
    location.href = url;
}
于 2012-06-06T20:12:14.937 回答
0

不妨让 jQuery Mobile 完成它的小魔术表演，用 jQuery Mobile 的实现替换你的location.href重定向：

  $.mobile.changePage( 'jquery-mobile-test.html?param=' + this.value );
于 2012-06-06T19:34:22.347 回答
0

这是一个肮脏的修复，但您可以使用setTimeout函数包围window.location ：

setTimeout(function() {
   window.location.href = '/some-url.html';
}, 0);
于 2013-12-30T13:34:07.950 回答