代码之家 › 专栏 › 技术社区 › Jake Wilson

jQuery无线电输入。on('change')触发两次

input forms jquery javascript

3

Jake Wilson · 技术社区 · 7 年前

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('更改') ? 为什么手动操作时行为会有所不同?以编程方式触发事件处理程序而不发生两次的正确方法是什么?

4 回复 | 直到 7 年前

1

5

charlietfl 7 年前

该事件将在集合中的每个元素上触发,无论其处于选中状态。两个无线电意味着触发了两个事件

最好只在其中一个被实际检查并且只在那个特定的一个上触发时触发它。

你可以用 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>

2

Abdus Sattar Bhuiyan 7 年前

使用 e.stopImmediatePropagation();

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

3

2

ic3b3rg 7 年前

这是锁链 .trigger('change')

因为你需要打电话给 change 我建议在加载时运行

function onRadioChange() { ... }

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

onRadioChange();

4

0

Vikas Verma 7 年前

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

5

0

Attila Naghi 6 年前

使用 stopImmediatePropagation

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