jQueryMobile: Wie arbeitet man mit Slider-Events?

Question

Ich teste die Schieber Ereignisse in jQueryMobile und ich muss etwas übersehen haben.

Seitencode ist:

<div data-role="fieldcontain">
    <label for="slider">Input slider:</label>
    <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
</div>

und wenn ich es tue:

$("#slider").data("events");

Ich bekomme

blur, focus, keyup, remove

Was ich tun möchte, ist den Wert abrufen, sobald der Benutzer den Schieberegler loslässt

und mit einem Hook für das Keyup-Ereignis als

$("#slider").bind("keyup", function() { alert('here'); } );

tut absolut nichts :(

Ich muss sagen, dass ich fälschlicherweise angenommen die jQueryMobile verwendet jQueryUI Kontrollen wie es war mein erster Gedanke, aber jetzt arbeiten tief in die Ereignisse kann ich sehen, das ist nicht der Fall, nur in Bezug auf die CSS-Design.

Was kann ich tun?

jQuery Mobile Schieberegler Quellcode finden Sie unter Git wenn es jemandem hilft, auch ein Testseite ist zu finden unter JSBin

---

So wie ich das verstehe, ist die #slider ist das Textfeld mit dem Wert, so würde ich brauchen, um in den Schieberegler Griff Haken wie der generierte Code für diesen Schieberegler ist:

<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
    <label for="slider" class="ui-input-text ui-slider" id="slider-label">Input slider:</label>
    <input data-type="range" max="100" min="0" value="0" id="slider" name="slider" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c ui-slider-input" />
    <div role="application" class="ui-slider  ui-btn-down-c ui-btn-corner-all">
        <a class="ui-slider-handle ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c" href="#" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="54" aria-valuetext="54" title="54" aria-labelledby="slider-label" style="left: 54%;">
            <span class="ui-btn-inner ui-btn-corner-all">
                <span class="ui-btn-text"></span>
            </span>
        </a>
    </div>
</div>

und die Überprüfung der Ereignisse im Handler-Anker erhalte ich nur die click Veranstaltung

$("#slider").next().find("a").data("events");

---

Fix

Von Ivan Antwort, wir brauchen nur:

<div data-role="fieldcontain">
    <label for="slider">Input slider:</label>
    <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
</div>

und dann

$(document).bind("pagecreate", function(event, ui) {

    $('#slider').siblings('.ui-slider').bind('tap', function(event, ui){ makeAjaxChange($(this).siblings('input')); });
    $('#slider').siblings('.ui-slider a').bind('taphold', function(event, ui){ makeAjaxChange($(this).parent().siblings('input')); 

});

function makeAjaxChange( elem ) { 
    alert(elem.val()); 
}

Gracias Ivan für die Vorwarnung.

Answer 1

<input type="range" id="player-slider" value="25" min="0" max="100"/>

$( "#player-slider" ).bind( "change", function(event, ui) {
    alert ("changed!");
});

Answer 2

Wenn Sie nur das Ereignis abfangen möchten, wenn der Schieberegler losgelassen wird (höchstwahrscheinlich um Ajax-Anfragen zu optimieren).

Das hat bei mir funktioniert:

var slider = $('#my_slider');
//as the answer from @nskeskin you have to remove the type range from your input on the html code
slider.slider({create:function(){
    //maybe this is too much hacking but until jquery provides a reference to this...
    $(this).next().children('a').bind('vmouseup', yourOnChangeCallback);
}
});

Auch dies verhindert, dass Sie Ereignisse hinzufügen, wenn das Steuerelement noch nicht initialisiert (oder erstellt), so warten auf die erstellen-Ereignis ist ein bisschen mehr korrekt ich denke.

Answer 3

 $('#slider').next().children('a').bind('taphold', function () {
        $('#slider').live("change", function (event, ui) {
          //do these.....
        });
    });

Answer 4

Am besten und einfachsten ist es, wenn Sie den untenstehenden Link prüfen. Dort erhalten Sie den Code für alle mobilen Geräte.

http://trentrichardson.com/2011/11/11/jquery-ui-sliders-and-touch-accessibility/