webentwicklung-frage-antwort-db.com.de

Löst ein jQuery-UI-Slider-Ereignis aus

Wie kann ich ein Änderungsereignis auf einem jQuery UI-Schieberegler auslösen?

Ich dachte es wäre 

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

aber das tut nichts.

Das vollständige Beispielskript folgt:

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

Ich würde erwarten, dass "0" angezeigt wird, wenn die Seite geladen wird

52
Greg

Versuchen

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

Nicht ideal, aber bringt Sie zum Arbeiten!

alt text

50
redsquare

Ich weiß, das ist schon lange nach dem Post-Date, aber ich wollte posten, um diese Lösung jedem zur Verfügung zu stellen, der auf diesen Beitrag stößt.

Sie können das Ereignis auslösen, indem Sie Folgendes tun:

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

//TO TRIGGER EVENT
$('#slider').trigger('slidechange');

Leider können Sie die Funktionen nicht als Optionen innerhalb des init-Objekts definieren. Ich denke jedoch, dass es sauberer aussieht und geradliniger und korrekter ist als die andere Antwort mit der Aufrufmethode (d. H. Es verwendet das Ereignissystem).

Ja, die Rückrufe, die Sie hier definieren, werden bei normalem Betrieb (Ändern der Position des Schiebereglers in diesem Fall) wie üblich aufgerufen. Stellen Sie einfach sicher, dass Sie die richtigen Ereignistypnamen aus der Dokumentation der Benutzeroberfläche verwenden.

Wenn Sie mehrere Ereignisse gleichzeitig hinzufügen möchten, denken Sie daran, dass Sie ein Objekt zum Binden bereitstellen können, indem Sie die Ereignisnamen als Schlüssel verwenden:

//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');

Dies ist in der Dokumentation vermerkt, obwohl es nicht sehr klar ist. Ich habe selbst ein paar Plugins entwickelt, um das UI-Ereignissystem wirklich zu verstehen.

Genießen

38
Joey Yore

Ein guter Ansatz besteht einfach darin, den Wert des Schiebereglers zu ändern. Die eigene Änderungsmethode des Schiebereglers sollte dann auf die Wertänderung reagieren. Zum Beispiel:

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

Dies könnte einen alten Thread wiederbeleben, hatte aber gerade eine ähnliche Erfahrung. Die Lösung, die ich mir ausgedacht habe (weil der Gedanke, slider(...) mehrmals aufzurufen, nicht ansprechend war):

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

$slider ist an die $(selector).slider(...)-Initialisierung gebunden. 

4
Wayne Weibel

Eine weitere Möglichkeit, die für UI-Widgets wie Autocomplete nützlich ist, ist der direkte Zugriff auf das Ereignis über die Datenmethode. JQuery speichert alle Informationen zum Ereignisanschluß mit .data ("events"). Wenn Sie diese Eigenschaft verwenden, können Sie auf die Ereignisse direkt zugreifen. Bei einigen Komponenten der Benutzeroberfläche (z. B. Autovervollständigung) sind die Ereignisse nicht einmal mit dem Hauptelement verbunden, sondern mit dem Benutzeroberflächenobjekt. Glücklicherweise ist dieses UI-Objekt auch in Daten verfügbar.

So können Sie das select-Event des Autocomplete ohne weiteres aufrufen:

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

Oder (zurück zu den Schiebereglern), um die Änderung eines Schiebereglers auszulösen:

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

Auslöser ist natürlich immer noch der beste Weg, da er eigentlich das Ereignissystem verwendet. Bei komplexeren Widgets, bei denen "$ (elem) .Trigger" nicht ausreicht, ist dieser Ansatz praktisch.

* EDIT *

Ich habe gerade herausgefunden, dass Sie das Ereignis mit dieser Methode mithilfe der "geheimen" _trigger-Eigenschaft des Widgets tatsächlich "auslösen" können. Zum Beispiel:

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

Hoffe das hilft jemandem.

4
machineghost

Wollte einen Kommentar zu Joey Yores Antwort hinzufügen -

Ich denke, es ist besser umgekehrt

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

Ansonsten werden einige Ereignisse (d. H. SlideCreate) ignoriert

2
gotofritz

Ich fand es einfacher, die "create" -Methode zu verwenden, um die Slide- oder Stoppfunktion aufzurufen. ZB für einen Slider mit einem Min/Max-Bereich:

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

Als Dokumentation ;

change (event, ui) Wird ausgelöst, nachdem der Benutzer einen Griff verschoben hat, wenn sich der Wert geändert hat. oder wenn der Wert programmgesteuert geändert wird über die value-Methode.

Richten Sie einfach ein Änderungsereignis ein

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

und Wert einstellen

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

Ich habe dieses Problem vor kurzem getroffen und habe die Kommentar-Lösung von Felipe Castro mit einer notwendigen Änderung verwendet, um den Kontext richtig einzustellen:

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

Wenn Sie an das Änderungsereignis des Schiebereglers wie folgt binden:

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

Dann können Sie es auslösen wie:

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

Die unten von Joey Yore erwähnte Lösung funktioniert auch, aber der Nachteil ist, dass das slidechange-Ereignis (meiner Erfahrung nach) nicht ausgelöst wird, wenn der Benutzer den Schieberegler von der Benutzeroberfläche aus ändert. 

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

//TO TRIGGER EVENT
$('#slider').trigger('slidechange');
0

Ich habe sowohl Slidechanged als auch Slide verwendet, Slide-Trigger werden beim Ziehen des Punkts ausgelöst. Slide.

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

Die jQueryUI Slider -Dokumentation enthält das folgende Beispiel zum Auslösen eines Ereignisses:

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

und für den Ereignisauslöser:

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

das hat bei mir nicht funktioniert!

Ich musste nur "slidechange" in "change" ändern, damit es funktioniert.

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

Ich hoffe, das hilft den zukünftigen Generationen, die auf dieses Problem stoßen.

0
Joe Black