跳转到下一个下拉列表时，jQuery级联下拉列表在iPhone上不起作用

Question

我的级联下拉列表在桌面浏览器和iPad上运行良好，但是我只需要它在iOS 7和Android上的iPhone上运行即可。 问题出在iPhone上。 如果使用>按钮导航到下一个下拉列表，则在第一个下拉列表中选择一个选项后，它将在ajax调用完成之前切换，因此我的下拉列表为空或仍保留先前的选择。 如果单击“完成”，则模糊事件足以使其正常工作。

这是最简单的全功能示例：

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Cascading dropdowns" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <title>Cascade</title>
</head>
<body>
    <div data-role="page" id="main">
      <div data-role="header" class="jqm-header">
        <h1>Cascade</h1>
     </div>
     <div data-role="content" >
        <div data-role="fieldcontain">
          <select name="agency" id="agency" >
              <option value="actransit">AC Transit</option>
              <option value="emery">Emeryville</option>
              <option value="sf-muni">MUNI</option>
          </select>
          <select name="selectRoute" id="selectRoute"></select>
        </div>
      </div>
   </div>
   <script>
    var nextBus = "http://webservices.nextbus.com/service/publicXMLFeed?";

    function updateRoutes(agency) {
            $.ajax({
                type: "GET",
                url: nextBus + "command=routeList&a=" + agency,
                dataType: "xml",
                success: function(xml) {
                    $("#selectRoute").children().remove();
                    $(xml).find('route').each(function(){
                        var tag = $(this).attr('tag');
                        var title = $(this).attr('title');
                        $('<option value="' + tag + '">' + title+ '</option>').appendTo("#selectRoute");
                    });
                    $("#selectRoute").selectmenu('refresh');
                }
            });
    }

    $().ready(function(){

        $("#agency").blur (function (event)
        {
            var agency = $("#agency").val();
            updateRoutes(agency);
       });

    });
   </script>
</body>
</html>

在某些浏览器中，可以通过按Tab键来模拟>按钮。 我尝试添加它以将焦点更改延迟到ajax完成之后：

    $("#selectAgency").keypress (function(e) {
      if (e.keyCode == 9) {
            tabHappened = true;
            updateRoutes($("#selectAgency").val());
            e.preventDefault();
        }
      }
    });

然后，在填充下一个下拉列表后，调用：

                if (tabHappened) {
                  tabHappened = false;
                  $("#selectRoute").focus();
                }

但是，无论是按键，击键，还是我尝试尝试的其他按键，似乎都无法触发，或者还有其他事情在发生。 我没有办法监视iPhone的Safari浏览器中正在发生的事件。 我很高兴能在iPhone上使用快速导航按钮来解决此问题。 在此先感谢您抽出宝贵的时间对此进行检查。

Answer 1

对ajax使用async = false可以防止触发所有后续事件，直到事件完成为止。 请参阅jQuery.ajax（）中的“异步：假”做什么？