Javascript jQuery Mobile中更改大选择菜单时重定向_Javascript_Jquery_Html_Jquery Mobile_Jquery Events

Javascript jQuery Mobile中更改大选择菜单时重定向

javascript jquery html jquery-mobile

Javascript jQuery Mobile中更改大选择菜单时重定向,javascript,jquery,html,jquery-mobile,jquery-events,Javascript,Jquery,Html,Jquery Mobile,Jquery Events,当用户从中的菜单中选择一个选项时，我在尝试重定向到另一个页面时遇到问题下面是一个非常小的例子，类似于我正在尝试做的，它展示了我所面临的问题。问题是，当选项列表太大而无法显示在屏幕上时，重定向就不起作用。当选项适合屏幕时，它工作正常。你可以通过使你的窗口非常小的方式在桌面浏览器中重现这一点 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport

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

下面是一个非常小的例子，类似于我正在尝试做的，它展示了我所面临的问题。问题是，当选项列表太大而无法显示在屏幕上时，重定向就不起作用。当选项适合屏幕时，它工作正常。你可以通过使你的窗口非常小的方式在桌面浏览器中重现这一点

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

来自以下方面的一些背景：

当select有少量适合设备屏幕的选项时，菜单将显示为一个带有pop转换的小覆盖。[…]当设备屏幕上显示的选项太多时，框架将自动创建一个新页面，并填充选项标准。这允许我们使用设备上包含的本机滚动来浏览长列表。标签内的文本用作此页面的标题

当它创建新页面时，会将&ui state=dialog添加到URL的末尾，然后当选择一个选项时，会将URL更改回原来的位置。我想这就是干扰我正在尝试的重定向的原因

关于解决这个问题的最佳方法有什么建议吗

编辑1：我应该提到，我无法使用$.mobile.changePage，因为我重定向到的页面本身进行了一些奇怪的重定向，这会扰乱转换。很抱歉，示例中没有说明这一点

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

最好让jQuery Mobile通过替换您的位置来完成它的小魔术表演。href重定向为jQuery Mobile的实现：

  $.mobile.changePage( 'jquery-mobile-test.html?param=' + this.value );

我想出来了，所以我要回答我自己的问题

下面是为我修复它的代码：

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

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

setTimeout(function() {
   window.location.href = '/some-url.html';
}, 0);

我不得不将它转移到jsfiddle.net来测试您的代码。我是否遗漏了什么，或者是否可以在您的要点中测试它？您可以下载html文件并在您的计算机上本地测试它。我决定不将它放在JSFIDLE上，因为它将位于iframe中，并且更难解释如何重现问题。请参阅我问题中的编辑。没关系。“pagebeforehide”事件的有趣用法，我必须记住。顺便说一句，$.mobile.changePage在我上面的基本示例中似乎并不一致。我不仅在全屏选项列表中遇到了这样的问题，而且在弹出选项中也遇到了这样的问题。此修复程序仅适用于全屏。对于弹出窗口，应该有另一个事件处理程序和选择器-我使用了mouseleave。