54

如何在jQuery UI 滑块上触发更改事件？

我以为会

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

4

12 回答 12

50

尝试

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

不理想，但可以让你工作！

替代文字

于 2009-08-17T16:46:16.547 回答
40

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

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

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

享受

于 2011-07-05T14:27:02.540 回答
16

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

var newValue=5;
$('#slider').slider("value", newValue);
于 2013-04-17T21:16:57.163 回答
4

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

因此，事不宜迟，以下是调用自动完成的选择事件的方法：

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

或者，（回到滑块）触发滑块的变化：

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

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

* 编辑 *

刚刚发现您实际上可以使用小部件的“秘密”_trigger 属性使用此方法正确“触发”事件。例如：

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

希望这可以帮助某人。

于 2012-01-20T01:55:56.593 回答
4

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

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

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

于 2013-11-04T21:27:26.000 回答
2

想对乔伊·约尔的回答添加评论-

我认为反过来更好

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

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

于 2011-09-28T09:43:43.833 回答
2

我发现使用“创建”方法来调用幻灯片或停止功能更容易。例如，对于具有最小/最大范围的滑块：

$('#height').slider({
        ...
        create: function(event, slider){ $( "#height" ).slider( "option", "values", [1100, 1500] ); handleHeightSlide('slide', $( "#height" ));},
        ...
    });
于 2012-06-22T21:31:30.557 回答
1

作为文档；

change( event, ui ) 用户滑动手柄后触发，如果值发生了变化；或者如果通过 value 方法以编程方式更改值。

只需设置绑定更改事件

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

和设定值

$(".selector").slider('value',0);
于 2013-11-26T15:12:09.457 回答
0

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

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

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

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

Joey Yore 提到的下面的解决方案也有效，但缺点是slidechange当用户从 UI 更改滑块时，不会触发事件（根据我的经验）。

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

//TO TRIGGER EVENT
$('#slider').trigger('slidechange');
于 2013-06-25T20:46:07.730 回答
0

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

});
于 2014-12-14T17:11:42.333 回答
0

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

$slider.slider('option', 'slide').apply($slider, [null, {value: $slider.slider('value')}])
于 2018-05-24T13:26:31.033 回答
0

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

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

对于事件触发器：

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

这对我不起作用！

我所要做的就是更改"slidechange"为"change".

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

希望这对偶然发现这个问题的后代有所帮助。

于 2019-02-16T11:55:55.057 回答