Trigger a jQuery UI slider event

2019-01-17 02:47发布

站内问答 / jQuery
911 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条回答
Ridiculous、
2楼-- · 2019-01-17 02:47

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" ));},
        ...
    });
查看更多
0人赞 添加讨论(0) 举报
乱世女痞
3楼-- · 2019-01-17 02:51

I've hit this problem recently, and used Felipe Castro's comment-solution, with a necessary change to set the context right:

$slider.slider('option', 'slide').apply($slider, [null, {value: $slider.slider('value')}])
查看更多
0人赞 添加讨论(0) 举报
地球回转人心会变
4楼-- · 2019-01-17 02:53

If you bind to to the slider's change event like that:

$('#slider').change(function() {
    alert('action');
});

Then you can trigger it like:

$('#slider').trigger('change');

The solution below mentioned by Joey Yore works too, but the downside is that slidechange event is not fired (from my experience) when user changes your slider from UI. 

//TO DEFINE SLIDER AND EVENTS
$('#slider').slider().bind('slidechange',function(event,ui){...});

//TO TRIGGER EVENT
$('#slider').trigger('slidechange');
查看更多
0人赞 添加讨论(0) 举报
爷、活的狠高调
5楼-- · 2019-01-17 02:54

As documentation;

change( event, ui ) Triggered after the user slides a handle, if the value has changed; or if the value is changed programmatically via the value method.

Just setup bind change event

$(".selector").slider({change: function(event, ui) {console.log('It Works!'}});

and set value

$(".selector").slider('value',0);
查看更多
0人赞 添加讨论(0) 举报
相关推荐>>
6楼-- · 2019-01-17 02:58

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.

So, without further ado, here's how you'd invoke the autocomplete's select event:

$("#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.

* EDIT *

Just figured out that you actually can "trigger" the event properly with this method, using the widget's "secret" _trigger property. For example:

$("#autoComplete").data("autocomplete")._trigger("select", fakeEvent, fakeItem)

Hope this helps someone.

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

Try

$slider = $('#slider');
$slider.slider('option', 'change').call($slider);

Not ideal but gets you working!

alt text

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