More than 5 years have passed since last update.

Sliderのchangeイベントが取得する方法

Posted at 2013-11-25

ちょっとハマったのでメモ。

##概要
inputタグのsliderの値が変更された時のイベントを設定したい。
jQueryMobileの公式Demoなどを見ると、input要素にイベントをバインドすると書いてあるけど上手く行かなかった。
色々調べた結果、onイベントを使ってイベントを設定すれば良いということが分かった。

##サンプル

HTML要素

<div id="Div1">
    <label for="Slider">BPM</label>
    <input type="range" name="slider" id="Slider" value="150" min="30" max="400" />
</div>

できなかった例

$("#Slider").bind("change", function(){
    alert(1);
});

$("#Slider").change(function(){
    alert(1);
});

できた例

$("#Div1").on("change", "#Slider", function(){
    alert(1);
})

つまりSliderの実態はjQueryで動的に作られる要素ということだろうか。
実際に生成されたhtmlを見てみると、inputタグの下にスライダー部分の要素が作られていることが分かる。