Радио-вход 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

При загрузке документа изменение инициируется для класса .radio.Так как у класса радио есть 2 переключателя, он вызовет изменения для них обоих, поскольку идентифицирует оба с одним и тем же классом.При выполнении этого вручную событие вызывается переключателем, на котором вы сделали щелчок, и, следовательно, событие вызывается только для этой кнопки.

Answer 2

Событие будет инициировано для каждого элемента в коллекции независимо от их проверенного состояния.Два радиомодуля означают два события, сработавшие

Вероятно, было бы лучше запустить его, только если один из них действительно проверен, и сработать только на этом конкретном.

Вы можете использовать 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 3

Это цепочка .trigger('change') - просто удалите ее.

, так как вам нужно вызвать функцию change при загрузке, я бы предложил

function onRadioChange() { ... }

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

onRadioChange();

Answer 4

использовать e.stopImmediatePropagation();

Попробуйте:

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