Question

我正在尝试构建一个带有切换/翻转滑块的JQM页面，该滑块根据滑块位置显示/隐藏txt框。请参阅JSfiddle test page。

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();
     };
 });

};

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

任何指针都会被感激地接受。

Answer 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');
});

jqm滑块停止事件未触发

1 个答案: