使用的動態建議列表 <ul><li> 在所有瀏覽器的桌面上都可以正常工作，但在iPhone移動設備上不能正常工作

Question

我已經使用ul和li標簽實現了動態建議列表，除iPhone移動設備外，其他所有設備都工作正常。

建議列表顯示正確，但選項選擇在iphone手機上不起作用 。

建議列表瀏覽器獨立代碼：

<div class="col-md-6">
                                          <div class="row">

                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="Cities-Counties">Cities/Counties:</label>
                                                    <input type="text" class="form-control city-input" name="city_1" id="city_1" placeholder="Enter City/County" autocomplete="off" value="">
                                                    <input type="hidden" name="cities[]" id="hid_city_1">
                                                    <ul class="serch-city" id="ulcity_1" style="display: none;"></ul>
                                                </div>
                                            </div>

                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <input type="text" class="form-control city-input" name="city_2" id="city_2" placeholder="Enter City/County" autocomplete="off" value="">
                                                    <input type="hidden" name="cities[]" id="hid_city_2">
                                                    <ul class="serch-city" id="ulcity_2" style="display: none;"></ul>
                                                </div>
                                            </div>

                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <input type="text" class="form-control city-input" name="city_3" id="city_3" placeholder="Enter City/County" autocomplete="off" value="">
                                                    <input type="hidden" name="cities[]" id="hid_city_3">
                                                    <ul class="serch-city" id="ulcity_3" style="display: none;"></ul>
                                                </div>
                                            </div>

                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <input type="text" class="form-control city-input" name="city_4" id="city_4" placeholder="Enter City/County" autocomplete="off" value="">
                                                    <input type="hidden" name="cities[]" id="hid_city_4">
                                                    <ul class="serch-city" id="ulcity_4" style="display: none;"></ul>
                                                </div>
                                            </div>
                                          </div>
                                        </div>

類“ search-city”的CSS代碼：

.serch-city {
    width: 94%;
    position: absolute;
    z-index: 1111;
    -webkit-z-index: 1111;
    max-height: 200px;
    background-color: #eff0f2;
    overflow: auto;
}

相關的jQuery腳本代碼：

$(document).delegate('.city-input', 'keyup', function()
    {
         var id = $(this).attr("id");

         var tmp = id.split("_");
         var city_cnt = tmp[1];        

         var serach_txt = $('#'+id+'').val();

         if(serach_txt!=''){ 
             s = {serach_txt:serach_txt};

             jQuery.ajax({

                    type: "post", 
                    url: '<?=BASE_URL?>clients/sort_cities',
                    data: s,
                    dataType:"json",

                    success: function(myObj) { 
                           var txt = "";
                           var count = Object.keys(myObj).length;  

                           if(myObj != null)
                           {
                              for(var i = 0;i < count; i++)
                              { 
                                  txt += '<li id="'+city_cnt+'_'+myObj[i].city_id+'" title="'+myObj[i].city_name+'" class="ctli">'+myObj[i].city_name+'</li>';
                              }
                           }

                           $("#ulcity_"+city_cnt+"").html(txt);
                           $("#ulcity_"+city_cnt+"").show();
                    }
             })
         }else{
             $("#ulcity_"+city_cnt+"").html('');
             $('#ulcity_'+city_cnt+'').hide();
         }   
    });

$(document).delegate('.ctli', 'click', function()
    { 
         var id = $(this).attr('id'); 
         var city_name = $(this).attr('title'); 

         var tmp = id.split("_");
         var city_id = tmp[1]; 
         var city_cnt = tmp[0];

         $('#city_'+city_cnt+"").val(city_name);
         $('#hid_city_'+city_cnt+"").val(city_id);
         $('#ulcity_'+city_cnt+"").hide();
    });

一切正常，僅適用於iPhone手機建議列表項選擇不起作用 。 請建議我進行更改。

Answer 1

只需添加：

.ctli {cursor：pointer}

iPhone通過“光標：指針” css識別單擊事件