jQuery 收音机输入 .on('change') 触发了两次

Posted 2023-05-09

【中文标题】jQuery 收音机输入 .on(\'change\') 触发了两次

【英文标题】：jQuery radio input .on('change') triggered twicejQuery 收音机输入 .on('change') 触发了两次

【发布时间】：2019-05-23 08:41:55

【问题描述】：

我有以下代码：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') 时会触发两次事件处理程序？为什么手动执行时行为不同？以编程方式触发事件处理程序而不发生两次的正确方法是什么？

【问题讨论】：

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

【参考方案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>

【讨论】：

这似乎是最好的答案。虽然我认为.trigger() 会同时应用于两个输入很奇怪，但.on('change'... 只会创建一个事件处理程序，即使有两个输入也是如此。谢谢

单个处理程序是的....但是侦听器位于集合中的所有元素上。与$('.radio').each(function() $(this).change..... ) 相同。 each 在您执行 $(selector).method() 时由 jQuery 内部完成@

【参考方案2】：

使用e.stopImmediatePropagation();

试试：

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

【参考方案3】：

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

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

function onRadioChange()  ... 

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

onRadioChange();

【讨论】：

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

问题是你链接到.radio的匹配项，即两个按钮

【参考方案4】：

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

【参考方案5】：

这也可以工作，使用stopImmediatePropagation:

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