复选框 onchange 触发两次

Posted 2023-02-24

【中文标题】复选框 onchange 触发两次

【英文标题】：checkbox onchange firing twice

【发布时间】：2016-08-29 09:10:54

【问题描述】：

我在这样的复选框上附加了onchange 事件：

$("input[type='checkbox'][name='auswahl[]']").on("change", function() 
    alert($(this).attr("id") + ' ' + $("label[for='" + $(this).attr("id") + "']").text() + $(this).attr("checked"));
);

复选框如下所示：

<input type="checkbox" name="auswahl[]" id="aus_nunatsiaqnews_ca"><label for="aus_nunatsiaqnews_ca" title="Canada">Nunatsiaq News</label>

不幸的是，该事件触发了两次。当我隔离上面给出的代码并将其放在测试页面上时，一切都很好，事件只触发一次。 需要帮助。

【问题讨论】：

何时附加事件处理程序？

它会触发一次 jsfiddle.net/gkz5owms 。我认为您以某种方式附加了“onchange”两次。

@Satpal：在定义复选框后，我将其附加在页面底部。没有使用 onload 或 document-ready。

@esertbas：我知道这一点。我写道“当我隔离上面给出的代码并将其放在测试页面上时，一切都很好，事件只触发一次。”

@Sempervivum 你应该给出完整的代码来解决它，没有代码真的很难找到:)

【参考方案1】：

当一个带有“onClick”事件的控件嵌套在另一个带有“onClick”事件的控件中时，通常会发生这种情况。单击其中一个元素会触发两个元素的事件，因为无法知道您要单击其中的哪一个。 幸运的是，这可以在 javascript 中防止。在 html 中，将“$event”参数传递给处理点击事件的函数，如下所示：

onClick="myFunc($event)"

然后，在“myFunc”中使用“stopPropagation”：

myFunc($event) 
  // ... some code ... //
  $event.stopPropagation();

【讨论】：

@Sempervivum 如果这解决了您的问题，请接受它作为答案。