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 に答える
4

オートコンプリートなどの 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)

これが誰かに役立つことを願っています。

于 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

Joey Yoreの回答にコメントを追加したい -

逆のほうがいいと思う

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

「create」メソッドを使用してスライドまたは停止関数を呼び出す方が簡単であることがわかりました。たとえば、最小/最大範囲のスライダーの場合:

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

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 に答える