如何在jQuery UI slider上触发更改事件?
我以为会是
$('#slider').trigger('slidechange');
但这没有任何作用。
完整示例脚本如下:
<link href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script src="http://jqueryui.com/latest/ui/ui.core.js" type="text/javascript"></script>
<script src="http://jqueryui.com/latest/ui/ui.slider.js" type="text/javascript"></script>
<body>
<div id="slider"></div>
<script type="text/javascript">
$().ready(function()
{
$('#slider').slider({change: function() { alert(0); }});
// These don't work
$('#slider').trigger('change');
$('#slider').trigger('slidechange');
});
</script>
我希望在页面加载
时提醒“0”答案 0 :(得分:50)
尝试
$slider = $('#slider');
$slider.slider('option', 'change').call($slider);
不理想但让你工作!
答案 1 :(得分:38)
我知道这已经超过了发布日期,但我想发布这个解决方案给任何偶然发现这个帖子的人。
您可以通过以下方式完成事件触发:
//TO DEFINE SLIDER AND EVENTS
$('#slider').slider().bind('slidechange',function(event,ui){...});
//TO TRIGGER EVENT
$('#slider').trigger('slidechange');
不幸的是,您无法将函数定义为init对象中的选项,但是,我认为它最终看起来更干净,并且比使用调用方法的其他答案更直接和正确(即它确实使用事件系统)。
是的,你在这里定义的回调将在正常操作时调用(在这种情况下改变滑块的位置),就像通常那样。只需确保使用UI文档中正确的事件类型名称。
如果您想一次添加多个事件,请记住您可以使用事件名称作为键提供绑定对象:
//TO DEFINE SLIDER AND EVENTS
$('#slider').slider().bind({
slidestart : function(event,ui) {...},
slidechange : function(event,ui) {...},
slidestop : function(event,ui) {...},
});
//TO TRIGGER EVENTS
$('#slider').trigger('slidestart');
$('#slider').trigger('slidechange');
$('#slider').trigger('slidestop');
这在文档中有说明,但不是很清楚。让我自己开发一些插件来真正理解UI事件系统。
享受
答案 2 :(得分:15)
一个好的方法就是改变滑块的值。然后,滑块自身的更改方法应响应值的更改。例如:
var newValue=5;
$('#slider').slider("value", newValue);
答案 3 :(得分:4)
另一种方法,对于像自动完成这样的UI小部件来说很方便,就是直接通过数据方法访问事件。 JQuery使用.data(“events”)存储其所有事件连接信息,因此如果您使用该属性,则可以直接访问事件。在某些UI组件(例如自动完成)上,事件甚至没有附加到主元素,它们附加到UI对象本身。幸运的是,该UI对象也可用于数据。
所以,不用多说了,这是你如何调用自动完成的选择事件:
$("#autoComplete").data("autocomplete").menu.select()
或者,(回到滑块)触发滑块的更改:
$("#slider").data("slider")._change()
触发仍然是最好的方式,因为它实际上利用了事件系统,但是在“$(elem).trigger”不够的更复杂的小部件上,这种方法很方便。
*编辑*
通过使用widget的“secret”_trigger属性,您实际上可以使用此方法正确“触发”事件。例如:
$("#autoComplete").data("autocomplete")._trigger("select", fakeEvent, fakeItem)
希望这有助于某人。
答案 4 :(得分:4)
这可能会复活一个旧线程,但只是有类似的经历。我提出的解决方案(因为多次调用slider(...)
的想法并不吸引人):
$slider.slider('option', 'slide').call($slider, event, ui);
将$slider
绑定到$(selector).slider(...)
初始化。
答案 5 :(得分:2)
想要对Joey Yore的回答发表评论 -
我认为反过来更好
$('#slider').bind({
slidestart : function(event,ui) {...},
slidechange : function(event,ui) {...},
slidestop : function(event,ui) {...},
slidecreate : function(event,ui) {...}
}).slider();
否则将忽略某些事件(即'slidecreate')
答案 6 :(得分:2)
我发现使用'create'方法调用slide或stop函数更容易。例如,对于具有最小/最大范围的滑块:
$('#height').slider({
...
create: function(event, slider){ $( "#height" ).slider( "option", "values", [1100, 1500] ); handleHeightSlide('slide', $( "#height" ));},
...
});
答案 7 :(得分:1)
change(event,ui)用户滑动句柄后触发,如果值已更改; 或者通过值方法以编程方式更改值。
只需设置绑定更改事件
$(".selector").slider({change: function(event, ui) {console.log('It Works!'}});
并设定值
$(".selector").slider('value',0);
答案 8 :(得分:0)
如果你像这样绑定到滑块的更改事件:
$('#slider').change(function() {
alert('action');
});
然后你可以触发它:
$('#slider').trigger('change');
Joey Yore提到的下面的解决方案也有效,但缺点是当用户从UI更改滑块时slidechange
事件未被触发(根据我的经验)。
//TO DEFINE SLIDER AND EVENTS
$('#slider').slider().bind('slidechange',function(event,ui){...});
//TO TRIGGER EVENT
$('#slider').trigger('slidechange');
答案 9 :(得分:0)
我使用了滑动和幻灯片, 拖动点时滑动触发, 释放鼠标按钮后滑动触发(就像点击事件一样)
var slider1 = $("#slider1").slider({ min: 1, max: 6 });
//option 1
slider1.on("slide", function (e, ui) {
});
//Option 2
slider1.on("slidechanged", function (e, ui) {
});
答案 10 :(得分:0)
我最近遇到了这个问题,并使用了Felipe Castro的评论解决方案,并进行了必要的更改以正确设置上下文:
$slider.slider('option', 'slide').apply($slider, [null, {value: $slider.slider('value')}])
答案 11 :(得分:0)
jQueryUI Slider文档给出了以下触发事件的示例:
$( ".selector" ).slider({
change: function( event, ui ) {}
});
,并触发事件:
$( ".selector" ).on( "slidechange", function( event, ui ) {} );
这对我不起作用!
要使其正常工作,我要做的就是将"slidechange"
更改为"change"
。
$( ".selector" ).on( "change", function( event, ui ) {} );
希望这对陷入这个问题的后代有所帮助。