为什么点击处理程序调用两次

Question

我已经创建了一个非常简单的jsFiddle示例,它将一个点击处理程序分配给两个单选按钮:

    $(document).ready(function () {
        $(".title").on("click", function (event) {
            alert('clicked');
        });
    });

如您所见,每次选择一个单选按钮时,处理程序被调用两次,为什么？

<label class="title">
    <input type="radio" name="heading" checked="checked" />Introduction and General Information about the Marketing Tool
</label>
<label class="title">
    <input type="radio" name="heading" />Implementation Steps of the Marketing Tool
</label>

Answer 1

您title在两个标签中都使用了这个类,这意味着它在两个无线电盒子上使用.单击它时,它会在两个单选框上触发事件.您应该使用单选按钮选择器来完成工作:

$(document).ready(function () {
    $(":radio").on("change", function (event) {
        alert('clicked');
    });
});

演示

参考变化

点击

$(document).ready(function () {
    $(":radio").on("click", function (event) {
        alert('clicked');
    });
});

演示