1

我正在尝试构建一个带有切换/翻转滑块的 JQM 页面，该滑块根据滑块位置显示/隐藏 txt 框。请参阅 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();
     };
 });

};

我无法触发滑块“停止”事件？？

任何指点将不胜感激。

4

1 回答 1

1

这是根据您的示例制作的工作解决方案：http: //jsfiddle.net/Gajotres/AWyXq/

你几乎没有错误。事件sliderstop 和sliderstart 不存在：

 $("#OnFront").on("sliderstart", function () {
     alert("User has started sliding my-slider!");
 });

它们的正确名称是slidestart和slidestop：

$('#OnFront').on('slidestart', function(){    
     console.log('Start');
});
于 2013-03-17T21:02:09.487 回答