jQuery級聯下拉菜單在下一個下拉菜單中不起作用

我的級聯下拉菜單在桌面瀏覽器和iPad上運行良好，但我真的只需要它在iOS 7和Android上的iPhone上工作。問題出在iPhone上。如果我使用>按鈕導航到下一個下拉列表，則在第一個下拉列表中選擇一個選項後，它會在ajax調用完成之前切換，因此我的下拉列表或者爲空或者仍然保留之前的選擇。如果我點擊完成，模糊事件足以使其工作。jQuery級聯下拉菜單在下一個下拉菜單中不起作用

這是最簡單的全功能例如：

<!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(); 
       }

但無論是按鍵，KEYDOWN，也沒有其他的幾個我試圖似乎觸發，或有其他事情正在發生。我沒有辦法監視iPhone safari瀏覽器上發生的事件。我非常感謝獲得iPhone上的快速導航按鈕的任何洞察力。提前感謝您花時間查看此結果。

來源

2013-12-17 orologics

收到沒有迴應，我已經總結出解決這個問題的唯一方法就是讓ajax調用同步。 – orologics

我想你會想要這個。我感到你的痛苦。 http://stackoverflow.com/questions/7472465/disabling-previous-and-next-buttons-in-mobile-safari – Progrower

對你的ajax使用async = false會阻止所有後續事件觸發，直到它完成。看到What does "async: false" do in jQuery.ajax()?

來源

2015-12-23 17:47:07

答案是使用async = false，因爲它可以防止其他事件觸發。該鏈接只是支持這一事實，根本不談論這種情況。所以答案不在鏈接中 –

jQuery級聯下拉菜單在下一個下拉菜單中不起作用

回答

相關問題