Frage an javascript, html5, jquery, range – JQuery Range Input Listener

19

Hey, ich habe ein bisschen Probleme mit der Suche und dem hmtl5-Bereich. Ich versuche, die geänderten Werte abzurufen, aber der Ereignis-Listener erfasst sie nicht. Derzeit ist mein Code:

HTML

<code>html += '<li>Apply Credits: <input type="range"  min="0" max="'+credits+'" name="discount_credits" id="discount_credits" /> <span>'+credits+'</span></li>'
</code>

Und das JS ist:

<code>$('#discount_credits').mousewheel( function() { 
        alert('it changed!'); 
        alert('new value = ' + $(this).val()); 
    });
</code>

Ich habe es auch versucht

<code>$('#discount_credits').change( function() { 
            alert('it changed!'); 
            alert('new value = ' + $(this).val()); 
        });
</code>

Beides scheint nicht zu funktionieren. Mache ich etwas falsch?

Wird die Ereignisbehandlungsroutine hinzugefügt, nachdem die Bereichseingabe in das DOM eingefügt wurde? Andreas

Deine Antwort

5   die antwort
12

Scheint kein Problem mit HTML5 zu haben<input type="range"> mitchange.

Sehen:http://jsfiddle.net/DerekL/BaEar/33/

Der Span-Wert wird nur aktualisiert, wenn ich den Schieberegler beim Hochfahren loslasse. In Google Chrome Version 34.0.1847.116 mit jQuery 2.0.3. Caroline Schnapp
Das ist vielleicht keine große Sache, aber es wird auch ausgelöst, wenn Sie einfach mit der Maus über den Schieberegler fahren. ansonsten tolle lösung! Willi Mentzel
@CarolineSchnapp - Behoben. Derek 朕會功夫
Zumindest in Chrome wird das Anhängen eines Handlers an das "Eingabe" -Ereignis selbst dann ausgelöst, wenn Sie den Mauszeiger bewegen. Für das Ereignis 'change' ist dies nicht der Fall. deshalb habe ich mich für 'change' entschieden, da schweben in meinem fall nicht als eingabe gewertet wird. Der schwebende Effekt kann problematisch sein, wenn Ihr Handler Dom-Manipulationen oder Ajax-Aufrufe auslöst. Luke W
4

Ich nehme an, Ihre Spanne hat eine ID:<span id="slidernumber">...</span> Nehmen wir auch an, dass Sie einige Schieberegler haben und eine Textänderung sehen möchten, wenn einer von ihnen verschoben wurde:

<code><li>
Apply Credits1: 
<input type="range" min="0" max="100" 
name="discount_credits1" id="discount_credits" 
/>
</li>

<li>
Apply Credits2: 
<input type="range" min="0" max="100" 
name="discount_credits2" id="discount_credits" 
/>
</li>

<span id="slidernumber">50</span>
</code>

Versuche dies:

<code>$(document).ready(function(){
  $("[type=range]").change(function(){
    var newval=$(this).val();
    $("#slidernumber").text(newval);
  });
});
</code>

http://jsfiddle.net/MahshidZeinaly/CgQ5c/

Nehmen wir nun an, Sie haben einige Schieberegler, möchten jedoch eine Textänderung sehen, wenn einer von ihnen verschoben wurde. (Ich nehme es an, weil der Bereichseingang innerhalb des li-Tags liegt und Sie ihm einen Namen gegeben haben):

<code><li>
Apply Credits1: 
<input type="range" min="0" max="100" 
name="discount_credits1" id="discount_credits" 
/>
<span id="slidernumber">50</span>
</li>

<li>
Apply Credits2: 
<input type="range" min="0" max="100" 
name="discount_credits2" id="discount_credits" 
/>
<span id="slidernumber">50</span>
</li>
</code>

Versuche dies:

<code>$(document).ready(function(){
  $("[type=range]").change(function(){
    var newv=$(this).val();
    $(this).next().text(newv);
  });
});
</code>

http://jsfiddle.net/MahshidZeinaly/2pe7P/1/

22
<code>$('input[type=range]').on('input', function () {
    $(this).trigger('change');
});
</code>

Dies feuert diechange Veranstaltung an jedeminput Veranstaltung.

0

Mehrere Tests und Fehler behoben!

<code>$('input[name=form_range]').change('mousestop',function () {

});
</code>
1

Das On-Change-Ereignis scheint für mich korrekt zu funktionieren:http://jsfiddle.net/zV3xD/7/

<code><input type="range"  min="0" max="100" name="discount_credits" id="discount_credits" />

<span id="newValue" value="0">0</span>

$('#discount_credits').change( function() {
    var newValue = this.value;        
    $('#newValue').html(newValue);
});​
</code>

Oder Sie können so etwas versuchendiese:

<code><form oninput="result.value=parseInt(a.value)">
    <input type="range" name="a" value="50" /> =
    <output name="result">0</output>
</form>
</code>

Verwendung deroutput Beispiel hier:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output

Hallo @CarolineSchnapp - Ich habe mein Beispiel aktualisiert, um eine andere Möglichkeit zur Lösung dieses Problems aufzuzeigen. Wenn es nicht ausreicht, lassen Sie es mich bitte wissen, und wir können etwas herausfinden, das wird. Chase
Es aktualisiert nur den Wert #newValue, wenn ich den Schieberegler beim Hochfahren loslasse. In Google Chrome Version 34.0.1847.116 mit jQuery 2.0.3. Caroline Schnapp

Verwandte Fragen