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')来跟进。在一个元素的值更改后触发的更改事件的数量可以为零，也可以为十。完成所有操作后，我想要一个可以调用单个方法的位置，在排队的所有这些更改事件发生后将触发一次。

下一次元素的值发生变化时，我会想要在所有后续更改事件发生后再次触发它。

我真的不能比那更清楚。我想另一种措辞方式是，如何确定在这种情况下会触发的变更事件的数量？

词汇表

最终更改事件 - 更改事件队列中的最终更改事件。如果您说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');
    }
});

在所有“改变”事件之后发生一次事件

1 个答案: