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

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

下面是一个非常小的例子，类似于我正在尝试做的事情，它展示了我遇到的问题。 问题是，当选项列表太大而不适合屏幕时，重定向不起作用。 当选项适合屏幕时，它工作正常。 （您可以通过使窗口非常小来在桌面浏览器中重现这一点。）

           $(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; }); });    
 
 
  Select an Option... One Two Three Four Five Six Seven Eight Nine Ten  
 
 
   

jQuery Mobile Docs的一些背景知识：

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

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

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

编辑＃1：我应该提到我无法使用$.mobile.changePage()因为我正在重定向的页面做了一些奇怪的重定向，它自己正在弄乱转换。 对不起，这个例子中没有表示。

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

Answer 1

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

这是修复它的代码：

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

Answer 2

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

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

Answer 3

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

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