触发jQuery UI滑块事件

尝试

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

不理想,但能让你工作!

我知道这已经过了发布日期,但我想发布这个解决方案,以提供给任何一个偶然发现这篇文章的人。

您可以通过执行以下操作来完成事件触发:

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

//TO TRIGGER EVENT
$('#slider').trigger('slidechange');

不幸的是,您不能将函数定义为init对象中的选项,但是,我认为它最终看起来更干净,比使用call方法(即它确实使用事件系统)的其他答案更直接和正确。

是的,您在这里定义的回调将在正常操作(在本例中更改滑块的位置)上调用,就像它通常那样。只需确保使用了来自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事件系统。

享受

一个好的方法就是简单地更改滑块的值。然后,滑块自己的更改方法应响应值的更改。例如:

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

另一种方法是通过数据方法直接访问事件,这对于像autocomplete这样的UI小部件很方便。jquery使用.data(“events”)存储其所有事件连接信息,因此如果使用该属性,则可以直接访问事件。在某些UI组件(如自动完成)上,事件甚至没有附加到主元素,而是附加到UI对象本身。幸运的是,该UI对象在数据中也可用。

因此,无需进一步的麻烦,以下是如何调用自动完成的select事件:

$("#autoComplete").data("autocomplete").menu.select()

或者,(回到滑块)触发滑块的更改:

$("#slider").data("slider")._change()

当然,触发器仍然是最好的方法,因为它实际使用了事件系统,但是在更复杂的小部件上,“$(elem).trigger”还不够,这种方法很方便。

*编辑*

刚刚发现您可以使用这个方法,使用小部件的“秘密”触发器属性,正确地“触发”事件。例如:

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

希望这能帮助别人。

这可能是一条旧线的复活,但只是有类似的经历。我想到的解决办法 slider(...) 多次没有吸引力):

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

用 $slider 被束缚在 $(selector).slider(...) 初始化。

想对乔伊·尤尔的回答发表评论-

我想换个方向比较好

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

否则,某些事件(即“slidecreate”)将被忽略。

我发现使用“create”方法调用slide或stop函数更容易。例如,对于最小/最大范围的滑块:

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

AS documentation ;

用户滑动句柄后触发的更改(事件、用户界面),如果该值已更改; 或者如果值以编程方式更改 通过值方法。

只设置绑定更改事件

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

设定值

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

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

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

然后你可以像这样触发它:

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

下面由Joey Yore提到的解决方案也有效,但缺点是 slidechange 当用户从用户界面更改滑块时,不会(根据我的经验)激发事件。

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

//TO TRIGGER EVENT
$('#slider').trigger('slidechange');

我用了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) {

});

我最近碰到这个问题,用 Felipe Castro 的注释解决方案,并进行必要的更改以设置上下文权限:

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

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

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

对于事件触发器:

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

这对我不起作用!

我要做的就是改变 "slidechange" 到 "change" .

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

希望这能帮助下一代人解决这个问题。