JQuery Mobile Slider 在事件后返回空白值

Question

我有四个相同的滑块，它们属于同一类 mySliderClass，但具有不同的 id 属性：s1、s2、s3 和 s4。我用这个 HTML 代码设置了每个滑块：

<span class="mySliderClass" data-role="fieldcontain"> %
    <input type="range" name="slider" id="slider" value="0" min="0" max="100"/>
</span>

然后我将 $(".mySliderClass") 的每个元素的 id 属性设置为 s1、s2、s3 和 s4。

我尝试了这段 javascript 代码来测试在 mouseup 事件后检索滑块的 id 和值：

$( ".mySliderClass" ).bind( "mouseup", function(event, ui) {
    var sliderID = $(this).attr('id');
    console.log(sliderID);
    var sliderValue = $(this).val();
    console.log(sliderValue);
});

我的控制台表明，当该滑块的手柄被释放时，任何给定滑块的正确 id 都会返回。但是，$(this).val() 总是返回一个空白字符串。此外，似乎根本没有检测到某些滑块事件，例如更改。我已经查看文档几个小时了，但我仍然无法找出问题所在。

Answer 1

这是因为您绑定到span。跨度的定义没有 id 也没有值。

相反，通过更改选择器将 mouseup 事件绑定到跨度内的实际滑块：

$( ".mySliderClass input[type='range']" ).bind( "mouseup", function(event, ui) {
    var sliderID = $(this).attr('id');
    console.log(sliderID);
    var sliderValue = $(this).val();
    console.log(sliderValue);
});

另外，对于您的代码，我不确定为什么会返回 id（不应该这样）。我在 chrome 上进行了测试，得到的 id 值为 undefined。