触发一个jQuery UI滑块事件
如何触发jQuery UI滑块上的更改事件？
我以为会是的
$('#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”
尝试
$slider = $('#slider'); $slider.slider('option', 'change').call($slider);
不理想，但让你工作！
我知道这是过去的发布date，但我想发布提供这个解决scheme给任何人在这个post发愁。
你可以通过做一些事情来完成事件触发：
//TO DEFINE SLIDER AND EVENTS $('#slider').slider().bind('slidechange',function(event,ui){...}); //TO TRIGGER EVENT $('#slider').trigger('slidechange');
不幸的是，你不能在init对象中定义这些函数作为选项，但是，我认为它最终看起来更干净，比使用调用方法的其他答案（即它使用事件系统）更直接，更正确。
是的，你在这里定义的callback将在正常操作（在这种情况下改变滑块的位置）被调用，就像通常那样。 只要确保从UI文档中使用正确的事件types名称即可。
如果要一次添加多个事件，请记住可以使用事件名称作为关键字提供一个对象进行绑定：
//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事件系统。
请享用
一个好的方法是简单地改变滑块的值。 滑块自己的改变方法应该对值的改变做出反应。 例如：
var newValue=5; $('#slider').slider("value", newValue);
还有另一种方式，像自动完成这样的UI小部件，就是直接通过数据方法访问事件。 JQuery使用.data（“events”）存储所有的事件连接信息，所以如果你使用这个属性，你可以直接访问事件。 在一些UI组件（例如自动完成）上，事件甚至没有附加到主要元素，它们被附加到UI对象本身。 幸运的是，该UI对象也可用于数据。
所以，不用多说，你可以调用自动完成的select事件：
$("#autoComplete").data("autocomplete").menu.select()
或者，（回到滑块）触发滑块的更改：
$("#slider").data("slider")._change()
触发器当然仍然是最好的方法，因为它实际上是利用事件系统，但是在“$（elem）.trigger”不够用的更复杂的小部件中，这种方法是非常方便的。
*编辑*
刚才发现你实际上可以用这个方法“触发”事件，使用widget的“秘密”_trigger属性。 例如：
$("#autoComplete").data("autocomplete")._trigger("select", fakeEvent, fakeItem)
希望这有助于某人。
这可能会复活一个古老的线索，但只是有一个类似的经验。 我提出的解决scheme（因为多次调用slider(...)的想法是不吸引人的）：
$slider.slider('option', 'slide').call($slider, event, ui);
将$slider绑定到$(selector).slider(...)初始化。
想要添加评论Joey Yore的答案 –
我认为这是相反的
$('#slider').bind({ slidestart : function(event,ui) {...}, slidechange : function(event,ui) {...}, slidestop : function(event,ui) {...}, slidecreate : function(event,ui) {...} }).slider();
否则一些事件（即“slidecreate”）将被忽略
我发现使用'create'方法调用幻灯片或停止函数更容易。 例如，对于具有最小/最大范围的滑块：
$('#height').slider({ ... create: function(event, slider){ $( "#height" ).slider( "option", "values", [1100, 1500] ); handleHeightSlide('slide', $( "#height" ));}, ... });
作为文件 ;
change（event，ui）在用户滑动句柄后触发，如果值已经改变; 或者如果值通过值方法编程改变 。
只需设置绑定更改事件
$(".selector").slider({change: function(event, ui) {console.log('It Works!'}});
并设定价值
$(".selector").slider('value',0);
如果绑定到像这样的滑块的更改事件：
$('#slider').change(function() { alert('action'); });
那么你可以像这样触发它：
$('#slider').trigger('change');
Joey slidechange的解决scheme也能起作用，但缺点是当用户从UI改变你的滑块时， slidechange事件不会被触发（从我的经验）。
//TO DEFINE SLIDER AND EVENTS $('#slider').slider().bind('slidechange',function(event,ui){...}); //TO TRIGGER EVENT $('#slider').trigger('slidechange');
我使用了slidechanged和slide，滑动触发器拖动点时，释放鼠标button后slidechanged触发器（就像点击事件）
var slider1 = $("#slider1").slider({ min: 1, max: 6 }); //option 1 slider1.on("slide", function (e, ui) { }); //Option 2 slider1.on("slidechanged", function (e, ui) { });
