イベント後にJQuery Mobile Sliderが空白の値を返しています

Question

同じクラスのmySliderClassを4つ持っていますが、id属性が異なるs1、s2、s3、s4の4つのスライダがあります。 S1、S2、S3に（ "mySliderClass。"）

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

は、それから私は$の各要素のid属性を設定し、S4：私は、このHTMLコードを各スライダを設定します。

私は、mouseUpイベント後のスライダーのIDと値を取り出すテストする場合は、このjavascriptのコードを試してみました：

$(".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イベントをバインド：idが返される理由（、私はわからないんだけど、あなたのコードで、

$(".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の値をundefinedと受け取った。