jQuery单选框输入.on('change')触发两次

Question

我有以下代码：http://jsfiddle.net/0Lp4oqn6/。

On <input type='radio' name='radio' class='radio' value='on'>
Off <input type='radio' name='radio' class='radio' value='off'>

$('.radio').on('change', function() {
    alert( $(this).val() )
}).trigger('change')

这是一组简单的2个单选输入框和一个事件处理程序，用于在单选输入框值更改时触发。还有一个.trigger('change')来触发事件处理程序在页面加载时发生一次。

当页面加载时，事件处理程序会被触发两次。第一个提示将显示on，第二个提示将显示off。但是当我手动点击单选按钮时，更改处理程序不会被触发两次。

为什么使用.trigger('change')会触发事件处理程序两次？手动操作时为什么行为不同？如何以适当的方式通过编程触发事件处理程序而不会发生两次？

- Jake Wilson

---

1. 当使用.trigger('change')时，为什么事件处理程序会被触发两次？ 因为有两个单选按钮，所以$('.radio').trigger()会被调用两次。
2. 为什么手动执行时行为不同？ 当您手动触发时，它只调用了事件更改，而不是触发更改。
3. 如何在编程上正确地触发事件处理程序，而不会发生两次？ 如果您想设置第一个单选按钮的更改，请像这样触发：$('.radio').eq(0).trigger('change')。

- Tamil Selvan C

Answer 1

无论集合中的元素是否被选中，该事件都将在每个元素上触发。两个单选按钮意味着会触发两个事件。

最好仅在其中一个单选按钮实际被选中并仅针对该特定单选按钮触发它。

如果有选中的单选按钮，您可以使用 filter(':checked') 来针对该选中的单选按钮进行操作。

当您手动更改单选按钮时，只有选中的单选按钮才会触发更改事件。

$('.radio').on('change', function() {
  console.log('Checked value =', $(this).val())
}).filter(':checked').trigger('change');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
On <input type='radio' name='radio' class='radio' value='on'> 
Off <input type='radio' name='radio' class='radio' value='off' checked>

- charlietfl

---

这似乎是最好的答案。虽然我认为.trigger()适用于两个输入框，但.on('change'...)只创建了一个事件处理程序，这有点奇怪。谢谢 - Jake Wilson

单个处理程序是可以的...但监听器会在集合中的所有元素上。这与执行 $（' .radio '）.each(function（）{ $（this）.change......}） 相同。当您执行 $（选择器）.方法（） 时，jQuery 会在内部执行 each。 - charlietfl

Answer 2

使用 e.stopImmediatePropagation();

尝试：

$('.radio').on('change', function(e) {
    e.stopImmediatePropagation();
    alert( $(this).val() )
}).trigger('change')

- Abdus Sattar Bhuiyan

Answer 3

这是一个链式操作：.trigger('change')，直接删除即可。

由于需要在加载时调用change函数，建议如下操作：

function onRadioChange() { ... }

$('.radio').on('change', onRadioChange);

onRadioChange();

- ic3b3rg

---

但是我需要在页面加载时以编程方式触发事件处理程序。为什么要将它删除？ - Jake Wilson

问题在于您将 .radio 的匹配结果链接到一起，即两个按钮。 - ic3b3rg

Answer 4

在文档加载时，会针对.radio类触发更改。由于radio类具有2个单选按钮，因此它将为两个按钮触发更改，因为它使用相同的类标识两个按钮。 而手动操作时，事件会在您单击的单选按钮上触发，因此事件仅触发该按钮。

- Vikas Verma

Answer 5

这也可以使用 stopImmediatePropagation 来实现：

$('.your_class_name').change(function(event) {
    event.stopImmediatePropagation();
    alert($(this).val());
});

- Attila Naghi