Trigger a jQuery UI slider event

2019-01-17 02:47发布

站内问答 / jQuery
912 11 6

How can I trigger a change event on a jQuery UI slider?

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

11条回答
【Aperson】
2楼-- · 2019-01-17 03:02

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).

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.

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.

Enjoy

查看更多
0人赞 添加讨论(0) 举报
叼着烟拽天下
3楼-- · 2019-01-17 03:10

Wanted to add a comment on Joey Yore's answer -

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

查看更多
0人赞 添加讨论(0) 举报
傲
4楼-- · 2019-01-17 03:11

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('option', 'slide').call($slider, event, ui);

With $slider being bound to the $(selector).slider(...) initialization.

查看更多
0人赞 添加讨论(0) 举报
姐就是有狂的资本
5楼-- · 2019-01-17 03:13

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);
查看更多
0人赞 添加讨论(0) 举报
迷人小祖宗
6楼-- · 2019-01-17 03:13

I Used both slidechanged and slide, slide triggers when drag the point, slidechanged triggers after release the mouse button (just like click event)

var slider1 = $("#slider1").slider({ min: 1, max: 6 });
//option 1
slider1.on("slide", function (e, ui) {

});
//Option 2
slider1.on("slidechanged", function (e, ui) {

});
查看更多
0人赞 添加讨论(0) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)