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')时事件处理程序被触发两次？为什么手动执行此操作时行为不同？以编程方式触发事件处理程序而不发生两次的正确方法是什么？

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>

Answer 2

使用e.stopImmediatePropagation();

尝试：

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

Answer 3

它是

链接的.trigger('change') - 只需将其删除即可。

由于您需要在加载时调用change函数，因此我建议

function onRadioChange() { ... }
$('.radio').on('change', onRadioChange);
onRadioChange();

Answer 4

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

Answer 5

这也可以使用stopImmediatePropagation：

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