javascript - 用于跳转/单击的 jQuery/jQuery UI slider 事件。函数未触发

Question

我正在创建一个 jQuery slider 来循环遍历 div 集合，如果我按住 slider 并拖动它然后放开。调用handleSlider()。如果我单击 slider 中的随机点，则该函数永远不会被调用。我尝试过使用其他两种事件类型，但没有成功。 slider 上是否有“当用户单击/跳跃时”而不滑动的事件处理程序？

$( "#video_seek" ).slider({
        range: "max",
        step: 1,
        slide: function( event, ui ) {
        handleSlider();
        }
    });
$( "#video_seek" ).slider({ stop: function( event, ui ) {handleSlider();}});
$( "#video_seek" ).slider({ change: function( event, ui ) {handleSlider();}});

Answer 1

我相信你的问题出在语法上。每次你使用 $ 时，它都会创建一个新的 jQuery 对象，所以

$( "#video_seek" ).slider({
        range: "max",
        step: 1,
        slide: function( event, ui ) {
        handleSlider();
        }
    });
//below are not necessarily referring to the original slider, but rather creating new sliders.
$( "#video_seek" ).slider({ stop: function( event, ui ) {handleSlider();}});
$( "#video_seek" ).slider({ change: function( event, ui ) {handleSlider();}});

@Andrew 的语法是正确的。您需要的只是“更改”事件，您可以在原始声明中设置该事件，如下所示:

$( "#video_seek" ).slider({
    change: function( event, ui ) {
         handleSlider();
    }
});

或者甚至像这样:

$( "#video_seek" ).slider({
    change: handleSlider
});

如果您需要在事后附加事件处理程序，请按如下操作:

$( "#video_seek" ).bind( "slidechange", function(event, ui) {
     handleSlider();
});

甚至:

$( "#video_seek" ).bind( "slidechange", handleSlider);

(编辑)

将它们放在一起并避免生成后续 jQuery 对象。

var videoSeek = $('#video_seek');
videoSeek.slider({
     slide: handleSlider
});
//added later on not necessary just for example of doing so
videoSeek.bind('slidechange', handleSlider);

function handleSlider(event, ui){
     //do stuff
}