Question

如何在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”

Answer 1

尝试

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

不理想但让你工作！

alt text

Answer 2

我知道这已经超过了发布日期，但我想发布这个解决方案给任何偶然发现这个帖子的人。

您可以通过以下方式完成事件触发：

//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事件系统。

享受

Answer 3

一个好的方法就是改变滑块的值。然后，滑块自身的更改方法应响应值的更改。例如：

var newValue=5;
$('#slider').slider("value", newValue);

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

希望这有助于某人。

Answer 5

这可能会复活一个旧线程，但只是有类似的经历。我提出的解决方案（因为多次调用slider(...)的想法并不吸引人）：

$slider.slider('option', 'slide').call($slider, event, ui);

将$slider绑定到$(selector).slider(...)初始化。

Answer 6

想要对Joey Yore的回答发表评论 -

我认为反过来更好

$('#slider').bind({
    slidestart  : function(event,ui) {...},
    slidechange : function(event,ui) {...},
    slidestop   : function(event,ui) {...},
    slidecreate : function(event,ui) {...}
}).slider();

否则将忽略某些事件（即'slidecreate'）

Answer 7

我发现使用'create'方法调用slide或stop函数更容易。例如，对于具有最小/最大范围的滑块：

$('#height').slider({
        ...
        create: function(event, slider){ $( "#height" ).slider( "option", "values", [1100, 1500] ); handleHeightSlide('slide', $( "#height" ));},
        ...
    });

Answer 8

作为documentation;

change（event，ui）用户滑动句柄后触发，如果值已更改; 或者通过值方法以编程方式更改值。

只需设置绑定更改事件

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

并设定值

$(".selector").slider('value',0);

Answer 9

如果你像这样绑定到滑块的更改事件：

$('#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');

Answer 10

我使用了滑动和幻灯片，拖动点时滑动触发，释放鼠标按钮后滑动触发（就像点击事件一样）

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

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

});

Answer 11

我最近遇到了这个问题，并使用了Felipe Castro的评论解决方案，并进行了必要的更改以正确设置上下文：

$slider.slider('option', 'slide').apply($slider, [null, {value: $slider.slider('value')}])

Answer 12

jQueryUI Slider文档给出了以下触发事件的示例：

$( ".selector" ).slider({
    change: function( event, ui ) {}
});

，并触发事件：

$( ".selector" ).on( "slidechange", function( event, ui ) {} );

这对我不起作用！

要使其正常工作，我要做的就是将"slidechange"更改为"change"。

$( ".selector" ).on( "change", function( event, ui ) {} );

希望这对陷入这个问题的后代有所帮助。

触发jQuery UI滑块事件

12 个答案: