【问题标题】:Detecting select slider change event in jQuery Mobile在 jQuery Mobile 中检测选择滑块更改事件
【发布时间】:2011-08-02 10:36:55
【问题描述】:

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

此行为的最小工作示例发布在此处:http://jsfiddle.net/NPC42/mTjtt/3/

这可能是由于 jQuery Mobile 添加了更多元素以将选择样式设置为翻转开关,但我找不到推荐的方法。

非常感谢任何帮助。

【问题讨论】:

  • +1 表示好问题。看起来是事件冒泡

标签: event-handling jquery-mobile


【解决方案1】:

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

【讨论】:

  • 感谢您的想法,但对我来说,它仍然会在每两次状态更改时引起 2-3 次警报 :( 它正在检查 Chrome,也许这不是一个好主意,应该在实际中进行测试移动设备?不过,这对调试来说将是一场噩梦。
  • 很奇怪,我无法重现该问题(在 Chrome 中),但这只是在 jsfiddle 中。
  • 看起来警报也影响了结果,所以我在这里重写了它以使用模拟控制台jsfiddle.net/NPC42/mTjtt/20,您的解决方案确实有效!虽然 jQuery Mobile 中的 bug 仍然存在,但我们将使用这种方法,谢谢!
【解决方案2】:

现场示例:

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 的问题/错误:

【讨论】:

  • 您是否检查了该代码执行了多少次?对我来说,它被调用了 2-3 次。我想你做动画的事实会慢慢阻止人们看到这一点。这是对您的实时代码进行简单更改以查看此效果:jsfiddle.net/NPC42/KCQ4Z/59
  • 起初我没有看到它,但这是 jQuery 版本 1.6.2 造成的。 1.6.1 在我的测试中很好。也许你应该使用点击事件而不是更改事件
  • hmm 点击事件似乎没有触发。测试
  • 谢谢,我明天先试试这个!
  • 在您的最新代码中,使用 stopPropagation,我得到与以前完全相同的结果 - 有几个事件称为 :(
【解决方案3】:

使用此代码,

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

!不要将 type="range" 放入您的输入标签中,而是将 type="text" 放入。

由于您是手动调用滑块函数。

【讨论】:

  • 它与 .change 绑定没有任何不同,在原来的 fiddle 上尝试过:jsfiddle.net/mTjtt/127 你真的测试了吗?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-01-06
  • 1970-01-01
  • 2012-08-27
  • 2013-02-14
  • 1970-01-01
  • 1970-01-01
  • 2012-12-13
相关资源
最近更新 更多