web-dev-qa-db-ja.com

jQuery UIスライダーイベントをトリガーする

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」を警告することを期待しています

jqueryeventsjquery-ui-slider
53
Greg

試して

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

理想的ではありませんが、機能します！

alt text

50
redsquare

私はこれが投稿日を過ぎていることを知っていますが、この投稿を見つけた人にこのソリューションを提供するために投稿したかったです。

次の行に沿って何かを行うことで、イベントトリガーを実現できます。

//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イベントシステムを本当に理解するために、自分でプラグインをいくつか開発しました。

楽しい

38
Joey Yore

良いアプローチは、スライダーの値を変更することです。スライダー自体の変更メソッドは、値の変更に応答する必要があります。例えば：

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

これは古いスレッドを復活させるかもしれませんが、同じような経験をしていました。私が思いついた解決策（slider(...)を複数回呼び出すという考えは魅力的ではなかったため）：

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

_$slider_が$(selector).slider(...)初期化にバインドされています。

4
Wayne Weibel

オートコンプリートなどのUIウィジェットに便利なもう1つの方法は、データメソッドを介してイベントに直接アクセスすることです。 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)

これが誰かを助けることを願っています。

4
machineghost

Joey Yoreの答えにコメントを追加したかった-

私はそれが逆の方が良いと思う

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

それ以外の場合、一部のイベント（つまり、「slidecreate」）は無視されます

2
gotofritz

「作成」メソッドを使用してスライドまたは停止機能を呼び出す方が簡単だとわかりました。たとえば、最小/最大範囲のスライダーの場合：

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

As ドキュメント ;

change（event、ui）値が変更された場合、ユーザーがハンドルをスライドした後にトリガーされます。 またはvalueメソッドを介してプログラムで値が変更された場合.

バインド変更イベントをセットアップするだけ

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

設定値

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

私は最近この問題にぶつかりました。コンテキストを正しく設定するために必要な変更を加えて、 Felipe Castro のコメントソリューションを使用しました。

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

そのようなスライダーの変更イベントにバインドする場合：

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

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

});
0
Premila

jQueryUI Slider ドキュメントには、イベントをトリガーするための次の例が記載されています。

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

イベントトリガーの場合：

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

これは私にはうまくいきませんでした！

動作させるために私がしなければならなかったのは"slidechange"から"change"。

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

これがこの問題につまずいた未来の世代を助けることを願っています。

0
Joe Black