スライダーの位置に基づいてtxtボックスを表示/非表示にするトグル/フリップスライダーを備えたJQMページを構築しようとしています。JSfiddleテスト ページを参照してください。
HTML -
<div data-role="page">
<div data-role="header" data-theme="b">
<label>JQM Slider Toggle test</label>
</div>
<div data-role="container">
<div data-role="fieldcontain">
<label for="OnFront">Device Location:</label>
<select name="OnFront" id="OnFront" data-role="slider" data-theme="b">
<option value="true">Front</option>
<option value="false">Rear</option>
</select>
</div>
<div id="DeviceOnFront">
<div data-role="fieldcontain">
<label for="FrontPosId">Front Position</label>
<input type="text" id="FrontPosId" class="input_txt"></input>
</div>
</div>
<div id="DeviceOnRear" hidden="hidden">
<div data-role="fieldcontain">
<label for="RearPosId">Rear Position</label>
<input type="text" id="RearPosId" class="input_txt"></input>
</div>
</div>
</div>
<div data-role="footer" data-theme="b">
<label>Glyn Lewis</label>
</div>
JS -
$('div[data-role="page"]').bind('pageinit', function () {
// debug test to see if events are firing ???
$("#OnFront").on("start", function () {
alert("User has started sliding my-slider!");
});
$("#OnFront").on("stop", function (event) {
var value = event.target.value;
alert("User has finished sliding my slider, its value is: " + value);
});
// code for changing which txt box is shown
// based on toggle/flip switch
$("#OnFront").on("stop", function (event) {
var value = event.target.value;
if (value == true) {
$("#DeviceOnFront").show();
$("#DeviceOnRear").hide();
} else {
$("#DeviceOnFront").hide();
$("#DeviceOnRear").show();
};
});
};
スライダーの「停止」イベントを発生させることができません??
どんな指摘もありがたく受け入れられます。