javascript - Counting Radio Button Not Working -

i'm writing app on 100 q/a flashcards , have added traffic light buttons allow user reflect on how understand each question/answer.

<form> <fieldset data-role="controlgroup" data-theme="b" data-type="horizontal" data-mini="true">     <legend>rate understanding</legend>     <input type="radio" name="traffic-lights" class="red" id="red" value="on" checked="checked">         <label for="red"><img src="http://new.chemistry-teaching-resources.com/images/red-light18.png" width="18px" height="18px" ></label>     <input type="radio" name="traffic-lights" class= "orange" id="orange" value="off">     <label for="orange"><img src="http://new.chemistry-teaching-resources.com/images/orange-light18.png" width="18px" height="18px"></label>     <input type="radio" name="traffic-lights" class="green" id="green" value="other">     <label for="green"><img src="http://new.chemistry-teaching-resources.com/images/green-light18.png" width="18px" height="18px"></label> </fieldset> 

the script is:

 $(document).ready(function () { $(".red,.orange,.green").change(function () {     $('.red_results').text($('.red:checked').length);     $('.orange_results').text($('.orange:checked').length);     $('.green_results').text($('.green:checked').length); }); 

});

to finish off i'd record number of red/orange/green button clicks.

<p><span class="red_results">0</span> <img src="http://new.chemistry-teaching-resources.com/images/red-light18.png" width="18px" height="18px"> <span class="orange_results">0</span> <img src="http://new.chemistry-teaching-resources.com/images/orange-light18.png" width="18px" height="18px"> <span class="green_results">0</span> <img src="http://new.chemistry-teaching-resources.com/images/green-light18.png" width="18px" height="18px"></p>     

i've based on number of similar examples on stack overflow, counting checked radio buttons jquery.

i've got working on jsfiddle, http://jsfiddle.net/ginneswatsonkelso/k1u2f56o/1/ doesn't work within app.

the js i'm using jquery-1.6.4.min.js, jquery.mobile-1.0.min.js , jquery-1.11.3.js , works 3 on jsfiddle.

presumably, i've done wrong can't see it.

the rest of is

<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script> 

the jquery on() event brought in jquery version 1.7.

the version of jquery running not support on() method. previous versions of jquery required .live() or .delegate(), latter being preferred method event delegation.

if able to, should updating version of jquery use more up-to-date features.