javascript - jQuery 滑块不可拖动

Question

我在我的 ruby​​ on rails 应用程序中使用 jQuery 滑块。问题是我无法拖动滑块按钮，但如果我单击滑块内的任何位置，它会成功移动。

查看文件

<div id="slider"></div>
<%= text_field_tag :search_radius, params[:search_radius], placeholder: "2 miles", class: "search_radius" %>

js文件

$(document).ready(function() {
 $("#slider").slider({
    step:1,
    range: "max",
    min: 1,
    max: 10,
    value: $('input.search_radius').val(), // needed to persist value after page reload
    slide: function(event, ui) {
      $(".search_radius").val(ui.value);
    },
  change: function() {
   $('input.search_radius').val( $( "#slider" ).slider( "value"));
    },
        create: function() {
    $('input.search_radius').val( $( "#slider" ).slider( ""));
  }
  });
$(".search_radius").val($("#slider").slider("value"));

css 文件

#slider {
 width:100px ;
 height:11px;
 background:url(slider/slider-bg.png);
 margin-left: 10px;
 position:relative;
 padding:0 10px;
}

/*Style for the slider button*/
.ui-slider-handle {
 width:24px !important;
 height:24px !important;
 position:absolute !important;
 top:-7px !important;
 margin-left:-12px !important;
 z-index:200 !important;
 background:url("slider/slider-button.png") !important;
 border: none !important;
 display: block !important;
}

/*Result div where the slider value is displayed*/
#search_radius {
 font-size:20px;
 height:$searchInputsHeight;
 font-family:Arial, Helvetica, sans-serif;
 color:green;
 width:80px;
 text-align:center;
 text-shadow:0 1px 1px #000;
 font-weight:700;
 display:inline;
}

应用程序.css

 *= require jquery.ui.slider

应用程序.js

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require jquery.ui.slider

Answer 1

您是否尝试过在 firebug 中查看控制台以查看 javascript 是否工作正常？

这听起来确实像一个 z-index 问题，但看起来您已经尝试解决这个问题。也许还可以尝试使用 firebug 'inspect element' 工具来确保滑块上方的 z-index 上没有任何内容。

如果可能的话，发送一个示例的链接，我会看看

Answer 2

嗯，乍一看，一切都很好。您能否尝试删除 - 更改并创建如下：

$(document).ready(function() {
 $("#slider").slider({
    step:1,
    range: "max",
    min: 1,
    max: 10,
    value: $('input.search_radius').val(), // needed to persist value after page reload
    slide: function(event, ui) {
      $(".search_radius").val(ui.value);
    }
  });
$(".search_radius").val($("#slider").slider("value"));