jQuery Mobile - 滑塊無法移動

Question

我正在使用jQuery滑塊，但無法移動手柄。

的HTML結構：

<div id="map" class="map" style="position: relative;"> 
    <div id="legend" class="legend" style="position: absolute; top: 0px; right: 0px; width:300px; z-index: 100;"> 
    <div style="width:290px; height: 150px; padding: 5px;"> 
     <label class="checkbox-label"><input name="gai_max_V" id="gai_max_V" class="runoff" type="checkbox"><image src="icons/icona_land_use.png"/><p id="legend_text">Soil Runoff Capacity (1955)</p></input></label> 
     <div id="div-slider"> 
     <input type="range" name="slider-1" id="slider-1" value="80" min="20" max="100" step="20" data-highlight="true"> 
     </div> 
    <div style="width:290px; height: 150px; padding: 5px;">...</div> 
    <div style="width:290px; height: 150px; padding: 5px;">...</div> 
    </div> 
</div> 

jQuery Mobile的版本是1.4.5，地圖，那是父DIV是由單張創建的內容：

var map = L.map('map', { 
    center: [45.81, 9.1], 
    zoom: 15 
}); 

你能猜到是爲什麼我無法移動手柄？

感謝，

Eylul

Answer 1

就可以解決這個問題的小CSS破解。

演示：https://jsfiddle.net/u2j24x25/2/

<!-- Insert this part after MAP --> 
<div id="div-slider"><input type="range" name="slider-1" id="slider-1" value="80" min="20" max="100" step="20" data-highlight="false"></div> 

/* CSS */ 
#map { height: 380px; } #div-slider {z-index:99999999;border:1px solid red;} #div-slider {position:relative;top:-250px;width:300px;float:right} 

編輯： 把DIV＃傳說後的div＃地圖將解決這個問題。

演示：https://jsfiddle.net/u2j24x25/4/

<div id="map" class="map" style="position: relative;"> 
</div> 

<div id="legend" class="legend" style="position: absolute; top: 0px; right: 0px; width:300px; z-index: 100;"> 
    <div style="width:290px; height: 150px; padding: 5px;"> 
     <label class="checkbox-label"> 
     <input name="gai_max_V" id="gai_max_V" class="runoff" type="checkbox"><image src="icons/icona_land_use.png"/><p id="legend_text">Soil Runoff Capacity (1955)</p></input></label> 
     <div id="div-slider"> 
     <input type="range" name="slider-1" id="slider-1" value="80" min="20" max="100" step="20" data-highlight="true"> 
     </div> 
    <div style="width:290px; height: 150px; padding: 5px;">...</div> 
    <div style="width:290px; height: 150px; padding: 5px;">...</div> 
    </div> 
</div> 

/* CSS */ 
#map { height: 380px; }