简体   繁体   中英

Jquery on change not working on input field type range

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:

在此处输入图片说明

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM