4

我创建了一个非常简单的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>
4

7 回答 7

6

您title在两个标签中都使用了该类，这意味着它在两个单选框上都使用了。当您单击它时，它会在两个单选框上触发事件。您应该使用单选按钮选择器来完成您的工作：

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

演示

参考变化

通过点击

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

演示

于 2013-09-13T13:42:23.247 回答
1

使用更改事件。它会正常工作。

$(document).ready(function () {
    $(".title").on("change", function (event) {
        alert('clicked');
    });
});
于 2013-09-13T13:42:59.163 回答
1

尝试

$(".title input").on("click", function (event) {
  alert('clicked');
});
于 2013-09-13T13:43:14.813 回答
1

发生这种情况是因为您的<input>标签在<label>标签内；由于单击标签也会触发对收音机的单击，因此您基本上是单击收音机两次。

如果将<input>标签移出<label>标签，则应该没问题。

于 2013-09-13T13:43:21.357 回答
0

问题出在<label>因为当你点击 label 时，radio 也会被点击，反之亦然。如果您更改<label>为<p>，此问题将得到解决：DEMO HERE

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

<p class="title">
    <input type="radio" name="heading" />Implementation Steps of the Marketing Tool
</p>

或者只是尝试将点击事件添加到这样的输入中：

$(document).ready(function () {
    $(".title input[type='radio']").on("click", function (e) {
        alert('clicked');
    });
});
于 2013-09-13T13:41:41.753 回答
0

title这与我的元素的范围有关。

如果您向输入添加一个类，然后将事件绑定到该类，它将正常工作。

HTML：

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

脚本：

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

小提琴

于 2013-09-13T13:45:04.570 回答
-1

做了一些修改，它工作正常......虽然你的代码是正确的，这里是你的例子

    $(document).ready(function () {
        $("input[type=radio]").on("click", function (event) {
            alert('clicked');
        });
    });
于 2013-09-13T13:45:21.100 回答