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

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>

- Dónal

---

它在我的小提琴上只被调用一次。你尝试在另一台机器/浏览器上了吗？ - SpaceDog

如果单击单选按钮，它似乎只会被调用一次，如果单击标签，则会被调用两次。 - James Montagne

如果您有一个标签，那么它也可能会触发单选按钮。 - Daniel

Answer 1

你在两个标签中都使用了“title”类，这意味着它被用在了两个单选框上。当你点击它时，会在两个单选框上触发事件。你应该使用单选按钮选择器来进行操作：

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

演示

参考 change

通过点击

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

demo

- Rituraj ratan

---

他不是在问我的想法，他只想知道出了什么问题。 - Charaf JRA

我在我的回答中提到 - Rituraj ratan

Answer 2

这是因为你的 <input> 标签在 <label> 标签内部；由于点击标签会同时触发单选按钮的点击事件，所以你实际上点击了单选按钮两次。

如果将 <input> 标签移出 <label> 标签，问题就应该解决了。

- Raibaz

---

你实际上并不是点击了两次单选框，而是点击了两次标签。 - James Montagne

Answer 3

使用更改事件（Change Event）。它将正常工作。

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

- Sarcastic

---

你说要使用change事件，但是你的代码却使用了click。 - James Montagne

感谢指出，这是一个打字错误。 - Sarcastic

Answer 4

尝试

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

- beautifulcoder

---

@Scalpweb 你试过吗？ - Ilia G

Answer 5

问题出现在 <label> 上，因为当您单击标签时，单选按钮也会被单击，反之亦然。 如果您将<label>更改为<p>，这个问题就会得到解决：此处演示。

<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');
    });
});

- Charaf JRA

---

将点击事件绑定到单选按钮上，而不是标签。 - James Montagne

Answer 6

这与 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');
        });
    });

小提琴

- SpaceDog

Answer 7

进行了一些修改，现在它可以正常工作了...虽然你的代码是正确的，这是你的example

    $(document).ready(function () {
        $("input[type=radio]").on("click", function (event) {
            alert('clicked');
        });
    });

- Deep Sharma

---

这并不是真的。点击事件并没有绑定在按钮和标签上，只有标签上。问题在于点击标签也会触发单选按钮的点击事件。因此它会触发两次，一次是点击标签，然后单选按钮的点击事件冒泡到标签并再次触发。单选按钮本身没有绑定处理程序。 - James Montagne

谢谢@JamesMontagne，我打开了两个fiddles，所以有点混淆了。无论如何，下次我会更加小心的。 :) - Deep Sharma