为什么 $("#slider").trigger("slide") 不会导致调用幻灯片处理程序？答案

【问题标题】：Why doesn't $("#slider").trigger("slide") result in calling the slide handler?为什么 $("#slider").trigger("slide") 不会导致调用幻灯片处理程序？
【发布时间】：2013-10-05 11:20:03
【问题描述】：

我有一个 jQuery 滑块（实际上是它的自定义扩展），它配备了 slide 事件的处理程序，当以交互方式操作滑块时，该处理程序会被正确调用，但在我运行时不会被调用

$("#slider").trigger("slide");

此命令运行没有错误，但 slide 处理程序没有被调用。

这是为什么？

我是否需要传递不同的参数来触发 slide 处理程序被调用？

编辑：更改帖子的标题以更准确地反映问题的动机。

【问题讨论】：

标签： jquery jquery-ui events jquery-ui-slider

【解决方案1】：

工作演示：http://jsfiddle.net/fLnmN/ 或 http://jsfiddle.net/F5ZCK/

使用.bind，就像我在演示中使用的那样。你也可以像这样使用.on：http://jsfiddle.net/u82Y5/

这里有一些非常有用的帖子：Trigger a jQuery UI slider event

这应该符合你的需要，:)

代码

$('.slider').slider().bind({
    change: function() {
       alert('change triggered');
    }
});

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

或

$('.slider').slider().on({
    change: function() {
       alert('change triggered');
    },
    slidechange: function() {
        alert('slide trigger');
    }
});

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

【讨论】：

谢谢！我不接受这个答案，因为我试图尽量减少这样做的方法的数量。（因此我的问题非常狭窄/集中。）我不明白在滑块的构造函数中指定回调和之后用bind 指定它们之间的区别。更准确地说，我不明白为什么这两种方法一开始就应该有所不同。我几乎不了解前一种方法，我不想通过引入另一种方法（使用bind的方法）来让自己更难。

【解决方案2】：

trigger('slide') 不起作用的原因是，当您设置 slide 回调时，滑块没有向 DOM 元素注册滑动事件。相反，它将通用鼠标事件委托给 DOM 元素，然后在内部将它们转换为您的回调。

不幸的是，这使您不得不解决该 API。 Tats_innit 的答案将事件直接绑定到 DOM 元素，但它们不绑定到滑块 API。您必须在这些处理函数中调用您的回调函数。

如果你的回调可以访问，你可以直接调用它们，如下：

$('#slider').slider({
  'slide': onSlide
}).on('slide', onSlide);

如果您更喜欢内联定义回调函数，您可以按如下方式检索它们：

$('#slider').slider({
  'slide': function(event, ui) { /* ... */ },
}).on('slide', function() {
  $(this).slider('option', 'slide').apply(this, arguments);
});

不用说这是非常多余的，但同样，这是一种解决方法。

附带说明，请记住，单独触发事件会跳过来自用户时将连续调用的其他事件。例如，触发stop 事件将错过用户在调整滑块时生成的slide 事件。您可以考虑通过创建代表您分派多个事件的自定义事件来“证明”外部事件绑定（例如，$('#slider').trigger('setvalue')）。

【讨论】：

仍然收到TypeError: Cannot read property 'values' of undefined，因为它缺少 ui 参数

【解决方案3】：

可以直接调用幻灯片回调，但是如果它在回调中使用，你应该传递事件（或空）和带有值的对象：

var $slider = $("#slider");
$slider.slider('option', 'slide').call($slider, null, {value:1});

【讨论】：