当用户从jQuery Mobile中的<select>菜单中选择一个选项时,尝试重定向到另一个页面有问题。
下面是一个非常小的例子,类似于我试图做的事情,证明了我的问题。问题是,当选项列表太大而无法显示在屏幕上时,重定向将不起作用。当选项适合屏幕时,它可以正常工作。(您可以在桌面浏览器中通过使窗口变得非常小来重现这一点。)

<!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有少量的选项适合设备屏幕时,菜单将显示为一个带有弹出转换的小覆盖。[…]当它有太多的选项无法在设备屏幕上显示时,框架将自动创建一个新的“页面”,其中填充了选项的标准list view。这允许我们使用设备上的本地滚动功能来浏览长列表。标签内的文本用作此页的标题。
当它创建新的“页面”时,它会将#&ui-state=dialog添加到URL的末尾,然后当选择一个选项时,它会将URL更改回原来的位置。我想这就是干扰我尝试的重定向的原因。
有什么建议可以解决这个问题吗?
编辑1:我应该提到我不能使用$.mobile.changePage(),因为我要重定向到的页面对自己的页面进行了一些奇怪的重定向,这会扰乱转换。很抱歉,这个例子中没有提到。
编辑2:我在上面粘贴了代码(而不是使用要点),这样人们可以通过搜索更容易地找到这个问题。

最佳答案

我想出来了,所以我要回答我自己的问题。
这是我的密码:

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;
}

关于javascript - 在jQuery Mobile中更改大选择菜单时重定向,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10920495/

10-12 12:31
查看更多