javascript - 计数单选按钮不起作用

Question

我正在编写一个包含 100 多个问答抽认卡的应用程序，并添加了红绿灯按钮，以允许用户反射(reflection)他们对每个问题/答案的理解程度。

<form>
<fieldset data-role="controlgroup" data-theme="b" data-type="horizontal" data-mini="true">
    <legend>Rate your 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>

脚本是:

 $(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);
});

});

最后，我想记录红色/橙色/绿色按钮的点击次数。

<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>    

我基于许多类似的堆栈溢出示例，主要是Counting Checked Radio Buttons with jQuery .

我已经在 jsfiddle 上完美运行了，http://jsfiddle.net/ginneswatsonkelso/k1u2f56o/1/但在我的应用程序中不起作用。

我使用的js是jquery-1.6.4.min.js、jquery.mobile-1.0.min.js和jquery-1.11.3.js，它适用于jsfiddle上的所有3个。

大概是我做错了什么，但我就是看不到。

我的其余部分是

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

Answer 1

jQuery on()事件是在 jQuery 1.7 版本中引入的。

您正在运行的 jQuery 版本不支持 on() 方法。需要早期版本的 jQuery .live()或.delegate() ，后者是事件委托(delegate)的首选方法。

如果可以的话，您应该考虑更新您的 jQuery 版本以使用更多最新功能。