JQuery не распознает движение в HTML Тип типа ввода

Я пытаюсь обновить текстовое поле на основе ползунка диапазона HTML5. Это первый раз, когда я использую тип диапазона, и мне трудно понять, что происходит.JQuery не распознает движение в HTML Тип типа ввода

<!doctype html> 

<html lang="en"> 
    <head> 
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> 


<script> 
$('#chanceSlider').on('change', function(){ 
    $('#chance').val($('#chanceSlider').val()); 
}); 

$('#chance').on('keyup', function(){ 
    $('#chanceSlider').val($('#chance').val()); 
}); 
</script> 

      </head> 
    <body> 

<input type="text" name="chance" id="chance" class="text" value="50"> 

<input type="range" id="chanceSlider" class="vHorizon" min="0.01" max="98" step="0.01" style="background-color: #00aec8; width: 50%;"> 




    </body> 
</html>

Это код, который я использую. В конечном итоге он будет интегрирован в другую страницу, но для меня это не сработает. Я искал примеры использования этого и придумал этот код. К сожалению, он все еще не работает, и у меня недостаточно хорошее понимание JQuery, чтобы понять, почему. Если бы вы могли показать мне, как исправить и/или дать мне объяснение, почему это не работает, это было бы здорово.

Заранее благодарен!

источник

2014-12-18 kirie

Что не работает? Я помещаю ваш код в jsfiddle, и я вижу, что ввод текста меняется при перемещении слайдера. – gyc

вы можете пойти demo.chatcoder.com/slider.html Я просто загрузил и там не работает. Может быть, у него есть кое-что, если у меня нет файла JQuery, но я проверил инструменты разработчика, и файл jquery существует. – kirie

попытайтесь переместить фрагмент скрипта в конец тела или обернуть его внутри $(). Ready (.. .) - элементы недоступны в заголовке. –

Вам нужно будет обернуть код jquery внутри функции готовности документа, потому что в то время, когда javascript анализируется, элементы html еще не существуют.

$(document).ready(function() { 
    $('#chanceSlider').on('change', function(){ 
     $('#chance').val($('#chanceSlider').val()); 
    }); 

    $('#chance').on('keyup', function(){ 
     $('#chanceSlider').val($('#chance').val()); 
    }); 
});

источник

2014-12-18 20:22:26 gyc

Или вы делаете $ (function() {...}); –

JQuery не распознает движение в HTML Тип типа ввода

ответ

Смежные вопросы