JQuery Mobile Slider возвращает пустые значения после событий - PullRequest
Новая
       15

JQuery Mobile Slider возвращает пустые значения после событий

0 голосов
/ 09 января 2012

У меня есть четыре идентичных ползунка одного класса mySliderClass, но с разными атрибутами id: s1, s2, s3 и s4.Я установил каждый слайдер с помощью этого HTML-кода: 

<span class="mySliderClass" data-role="fieldcontain"> %
    <input type="range" name="slider" id="slider" value="0" min="0" max="100"/>
</span>

Затем я установил атрибут id каждого элемента $ (". MySliderClass") в s1, s2, s3 и s4.

Я попробовал этот код javascript для проверки получения идентификатора и значения ползунка после события mouseup: 

$( ".mySliderClass" ).bind( "mouseup", function(event, ui) {
    var sliderID = $(this).attr('id');
    console.log(sliderID);
    var sliderValue = $(this).val();
    console.log(sliderValue);
});

Моя консоль указывает, что верный идентификатор любого заданного ползунка возвращается при отпускании дескриптора этого ползунка,Однако $ (this) .val () всегда возвращает пустую строку.Кроме того, кажется, что некоторые события ползунка, такие как изменение, вообще не обнаруживаются.Я просматриваю документацию уже несколько часов, но до сих пор не могу понять, в чем дело.

1 Ответ

1 голос
/ 09 января 2012

Это потому, что вы привязываетесь к span. Интервал определяется без идентификатора и без значения.

Вместо этого, свяжите событие mouseup с фактическим ползунком внутри диапазона, изменив селектор: 

$( ".mySliderClass input[type='range']" ).bind( "mouseup", function(event, ui) {
    var sliderID = $(this).attr('id');
    console.log(sliderID);
    var sliderValue = $(this).val();
    console.log(sliderValue);
});

Кроме того, с вашим кодом я не уверен, почему возвращается идентификатор (это не должно быть). Я тестировал на Chrome и получил значение undefined для идентификатора.

...