触发 jQuery UI 滑块事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1288824/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trigger a jQuery UI slider event
提问by Greg
How can I trigger a change event on a jQuery UI slider?
如何在jQuery UI 滑块上触发更改事件？
I thought it would be
我以为会是
$('#slider').trigger('slidechange');
but that does nothing.
但这没有任何作用。
Full example script follows:
完整的示例脚本如下：
<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>
I would expect this to alert "0" when the page loads
我希望这会在页面加载时提醒“0”
采纳答案by redsquare
Try
尝试
$slider = $('#slider');
$slider.slider('option', 'change').call($slider);
Not ideal but gets you working!
不理想，但可以让您工作！
回答by Joey Yore
I know this is way past the post date, but I wanted to post to provide this solution to anyone that stumbles upon this post.
我知道这已经超过了发布日期，但我想发布以向偶然发现此帖子的任何人提供此解决方案。
You can accomplish event triggering by doing something along the lines of:
您可以通过执行以下操作来完成事件触发：
//TO DEFINE SLIDER AND EVENTS
$('#slider').slider().bind('slidechange',function(event,ui){...});
//TO TRIGGER EVENT
$('#slider').trigger('slidechange');
Unfortunately you cannot define the functions as options within the init object, however, I think it ends up looking cleaner and is more straight forward and correct than the other answer using the call method (i.e. it does use the event system).
不幸的是，您不能将函数定义为 init 对象中的选项，但是，我认为它最终看起来更清晰，并且比使用 call 方法的其他答案更直接和正确（即它确实使用了事件系统）。
And yes, the callbacks you define here will be called on normal operation (changing the position of the slider in this case) as it normally would. Just make sure you use the correct event type names from the UI documentation.
是的，您在此处定义的回调将像往常一样在正常操作（在这种情况下更改滑块的位置）时调用。只需确保使用 UI 文档中的正确事件类型名称即可。
If you want to add multiple events at once, remember you can provide an object to bind using the event names as keys:
如果您想一次添加多个事件，请记住您可以提供一个对象以使用事件名称作为键进行绑定：
//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');
This is noted in the documentation, although, it is not very clear. Took me developing a couple plugins on my own to really understand the UI event system.
这在文档中有所说明，但不是很清楚。带我自己开发了几个插件来真正理解 UI 事件系统。
Enjoy
享受
回答by hrabinowitz
A good approach is simply to change the value of the slider. The slider's own change method should then respond to the change of value. For instance:
一个好的方法是简单地更改滑块的值。然后滑块自己的更改方法应该响应值的更改。例如：
var newValue=5;
$('#slider').slider("value", newValue);
回答by machineghost
Yet another way, which is handy for UI widgets like autocomplete, is to access the event directly via the data method. JQuery stores all of its event hookup info using .data("events"), so if you use that property you can access the events directly. On some UI components (eg. autocomplete) the events aren't even attached to the main element, they're attached to the UI object itself. Luckily, that UI object is also available in data.
另一种对自动完成等 UI 小部件很方便的方法是直接通过 data 方法访问事件。JQuery 使用 .data("events") 存储其所有事件连接信息，因此如果您使用该属性，您可以直接访问事件。在某些 UI 组件（例如自动完成）上，事件甚至不附加到主元素，而是附加到 UI 对象本身。幸运的是，该 UI 对象也在数据中可用。
So, without further ado, here's how you'd invoke the autocomplete's select event:
因此，事不宜迟，以下是您如何调用自动完成的 select 事件：
$("#autoComplete").data("autocomplete").menu.select()
Or, (getting back to sliders) to trigger a slider's change:
或者，（回到滑块）触发滑块的变化：
$("#slider").data("slider")._change()
Trigger is still the best way of course, since it actual utilizes the event system, but on the more complex widgets where "$(elem).trigger" won't be enough, this approach is handy.
当然，触发器仍然是最好的方式，因为它实际上利用了事件系统，但是在更复杂的小部件上，“$(elem).trigger”不够用，这种方法很方便。
* EDIT *
* 编辑 *
Just figured out that you actually can "trigger" the event properly with this method, using the widget's "secret" _trigger property. For example:
刚刚发现您实际上可以使用此方法正确“触发”事件，使用小部件的“秘密”_trigger 属性。例如：
$("#autoComplete").data("autocomplete")._trigger("select", fakeEvent, fakeItem)
Hope this helps someone.
希望这可以帮助某人。
回答by Wayne Weibel
This maybe resurrecting an old thread, but was just having a similar experience. The solution that I came up with (because the thought of calling slider(...)multiple times was not appealing):
这可能会复活一个旧线程，但只是有类似的经历。我想出的解决方案（因为slider(...)多次调用的想法并不吸引人）：
$slider.slider('option', 'slide').call($slider, event, ui);
With $sliderbeing bound to the $(selector).slider(...)initialization.
随着$slider被绑定到$(selector).slider(...)初始化。
回答by Phil De Caux
I found it easier to use the 'create' method to call the slide or stop function. Eg, for a slider with a min/max range:
我发现使用“创建”方法调用幻灯片或停止函数更容易。例如，对于具有最小/最大范围的滑块：
$('#height').slider({
...
create: function(event, slider){ $( "#height" ).slider( "option", "values", [1100, 1500] ); handleHeightSlide('slide', $( "#height" ));},
...
});
回答by gotofritz
Wanted to add a comment on Joey Yore's answer -
想对 Joey Yore 的回答发表评论 -
I think it's better the other way round
我认为反过来更好
$('#slider').bind({
slidestart : function(event,ui) {...},
slidechange : function(event,ui) {...},
slidestop : function(event,ui) {...},
slidecreate : function(event,ui) {...}
}).slider();
Otherwise some events (namely, 'slidecreate') will be ignored
否则某些事件（即“slidecreate”）将被忽略
回答by rbostan
As documentation;
作为文件；
change( event, ui ) Triggered after the user slides a handle, if the value has changed; or if the value is changed programmaticallyvia the value method.
change( event, ui ) 在用户滑动手柄后触发，如果值发生了变化；或者如果通过 value 方法以编程方式更改值。
Just setup bind change event
只需设置绑定更改事件
$(".selector").slider({change: function(event, ui) {console.log('It Works!'}});
and set value
并设定值
$(".selector").slider('value',0);
回答by Premila
I Used both slidechanged and slide, slide triggers when drag the point, slidechanged triggers after release the mouse button (just like click event)
我同时使用了slidechanged和slide，拖动点时滑动触发，释放鼠标按钮后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) {
});
回答by niquis7
I've hit this problem recently, and used Felipe Castro's comment-solution, with a necessary change to set the context right:
我最近遇到了这个问题，并使用了Felipe Castro的评论解决方案，并进行了必要的更改以正确设置上下文：
$slider.slider('option', 'slide').apply($slider, [null, {value: $slider.slider('value')}])
