Пожар одного события «события»

Question

У меня есть динамическая форма с элементами, загружаемыми и выгружаемыми в разных точках. Элементы формы также обновляют значения других элементов «на лету». Чтобы справиться с этим, у меня есть событие изменения, связанное со всех select и input элементов с использованием:

jQuery('#myelement').on('change', 'select,input', function(e){ 
    // ... do things after any form element changes value 

    // Fire myFunction() only once - preferably after the final 'change' event happens. 
    myFunction(); 
}); 

я теперь нужен обратный вызов, чтобы стрелять после запуска всех событий изменения. Размещение любого объекта внутри связанного события будет вызвано после изменения значения элемента. Вместо этого я хочу только вызвать мой обратный вызов. Как я могу это сделать?

---- Редактировать ----

Я предполагаю, что я не ясно, о чем я спрашиваю.

У меня есть элемент, назовем его #myelement (будь то форма или нет, не имеет значения). У меня есть код, который запускается, когда страница готова, которая связывает некоторые события изменения с дочерними объектами #myelement, как показано в приведенном выше коде. Я делаю это, потому что у меня динамически загружаются компоненты, а простой ('select').on('change', function() ... не привязан к новым элементам формы.

Когда элемент формы изменяется, есть дополнительные пользовательские события, которые будут срабатывать для каждого из них. Некоторые из них следят за выстрелом (#another-element).trigger('change'). Количество событий изменения, которые срабатывают после изменения значения одного элемента, может быть равно нулю или может быть десять. Когда все сказано и сделано, мне нужно место, где я могу вызвать один метод, который будет срабатывать один раз после того, как произойдут все эти события изменений.

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

Я не могу быть более ясным, чем это. Я предполагаю, что это будет другой способ формулировки, как я могу определить количество событий изменений, которые будут возникать в этом случае?

---

Глоссарий

1. Final Change Event - окончательное событие изменения в очереди событий изменения. Если вы скажете jQuery('select').on('change', function(){ ... }), окончательным событием изменения будет событие, вызванное последним select элементом в очереди.

Answer 1

Если я правильно понял вопрос, вы хотите иметь функцию обратного вызова, которая выполняется, когда все элементы формы были изменены. Насколько я знаю, такого события нет. Вы можете сохранить измененные элементы формы в массиве и сравните длину массива на длину элементов формы:

var 
    $form = $('#my-form'), 
    // the following variables should be reset 
    // when the form controls are regenerated 
    changedElements = [], 
    formControlsLength = $form.prop('elements').length 
; 

$form.on('change', 'input, select', function() { 
    if (changedElements.indexOf(this) !== -1) return; 
    changedElements.push(this); 
    if (changedElements.length === formControlsLength) { 
     $form.trigger('all_changed'); 
    } 
}); 

$form.on('all_changed', function() { 
    // ... 
}); 

Другой способ реализации той же самой логике использует классы CSS:

$form.on('change', 'input, select', function() { 
    var $els = $($form.prop('elements')); 
    $(this).addClass('changed'); 
    if ($els.not('.changed').length === 0) { 
     $form.trigger('all_changed'); 
    } 
});