在jQuery Mobile中检测选择滑块更改事件

Question

什么是一个可靠的方法来检测jQuery移动选择滑块的变化?我尝试绑定一个处理程序来改变选择控件本身的事件，但是它在初始页面显示时触发，然后在单击时触发多次，有时甚至在悬停时(在桌面浏览器中)。

此行为的最小工作示例张贴在这里:http://jsfiddle.net/NPC42/mTjtt/3/

这可能是由于jQuery Mobile添加了更多元素来样式选择作为翻转切换，但我找不到推荐的方法。

Answer 1

可能不是最巧妙的解决方案，但它有效http://jsfiddle.net/mTjtt/4/

Answer 2

实例:

• http://jsfiddle.net/KCQ4Z/14/
• http://jsfiddle.net/phillpafford/KCQ4Z/70/(使用stopPropagation())

JS:

$('#my-slider').change(function(event) {
    event.stopPropagation();
    var myswitch = $(this);
    var show     = myswitch[0].selectedIndex == 1 ? true:false;
    if(show) {            
        $('#show-me').fadeIn('slow');
        $('#first-me').fadeOut();
    } else {            
        $('#first-me').fadeIn('slow');
        $('#show-me').fadeOut();
    }
});

HTML:

<div data-role="page" id="home" class="type-home"> 
    <div data-role="content"> 
        <div class="content-primary"> 
            <p>The flip toggle switch is displayed like this:</p> 
            <div data-role="fieldcontain"> 
                <label for="slider">Flip switch:</label> 
                <select name="slider" id="my-slider" data-role="slider"> 
                    <option value="off">Off</option> 
                    <option value="on">On</option> 
                </select> 
            </div> 
            <div id="first-me">
                <p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </p>  
            </div>
            <div id="show-me" class="hidden">
                <p>
                    Bacon ipsum dolor sit amet bresaola velit laboris bacon eiusmod. Id ex short ribs, dolor dolore rump pork belly beef ad ullamco salami labore aute ut. Jowl et in do, fatback jerky salami reprehenderit irure laboris pork loin commodo qui eu. Chuck tri-tip cupidatat, turkey sunt in anim jerky pork belly exercitation bacon. Eu corned beef qui adipisicing, ground round veniam turkey chicken incididunt deserunt. Proident t-bone chuck, non excepteur biltong elit in anim minim swine short loin magna do. Sint enim nisi, minim nulla tongue ut incididunt ground round.
                </p>  
            </div>
        </div>
    </div>
</div>

更新:

我在这里提出了jQM的一个问题/错误:

• https://github.com/jquery/jquery-mobile/issues/2188

Answer 3

使用此代码，

$( ".mySliders" ).slider({
    create: function (event, ui) {
        $(this).bind('change', function () {
            ...
            ...
        });
    }
});

!不要把type="range"放到你的输入标签中，而要用type="text"代替。