Jquery on change не работает с диапазоном типов полей ввода

Я использую inputтип with rangeи пытаюсь обновить innerHTML выходного поля с id outputс выбранным значением каждый раз, когда значение изменяется.

Я решил это так:

function regler()
{
  document.getElementById("output").innerHTML = document.getElementById("regler").value;
}
<input id="regler" value="0" type="range" onchange="regler()">
<p id="output"></p>

Эта работа. Но если я попробую это с Jquery, то ничего не произойдет:

$("#regler").on
(
  "change", 
  function(event)
  { 
    document.getElementById("output").innerHTML = document.getElementById("regler").value; 
  }
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="regler" value="0" type="range">
<p id="output"></p>

Что я делаю не так?

EDIT: я только что заметил, что код хорошо работает на SO, но не на моем локальном веб-сервере?

EDIT2: почему мое поле диапазона выглядит так (протестировано с Chrome и Firefox):

Введите описание изображения здесь

Вместо этого, как это:

Введите описание изображения здесь

1 ответ

  1. Я понял проблему. Проблема в том, что я включаю jquery.mobile-1.4.5.min.jsпосле моего обычного jquery-2.2.3.min.jsсценария.

    После того, как я изменил порядок, он работает. Извините , что не упомянул, что я включаюjquery.mobile, я не знал, что этот файл имеет какое-то отношение к проблеме.