更改时的jQuery无法在输入字段类型范围上使用

Question

I use a input with type range and try to refresh the innerHTML of an output field with id output with the selected value, each time when the value changes.

I solved it like this:

 function regler() { document.getElementById("output").innerHTML = document.getElementById("regler").value; } 

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

This works. But if i try it with Jquery then nothing happens:

 $("#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> 

What am i doing wrong?

EDIT : I just noticed that the code runs well on SO but not on my local webserver?

EDIT2 : Why is my range field looking like this (Tested with Chrome and Firefox):

Instead like this:

Answer 1

I figured out the problem. The problem is that i include jquery.mobile-1.4.5.min.js after my normal jquery-2.2.3.min.js script.

After i changed the order, it works. Sorry for not mentioning that i include jquery.mobile , i did not knew that this file has something to do with the problem.