在所有“更改”事件之后触发一个事件
我有一个动态表单，在不同的点加载元素。表单元素还会动态更新其他元素的值。为了处理这个问题，我使用以下方法将更改事件绑定到所有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元素上触发的事件。
回答 1
Stack Overflow用户
发布于 2015-03-24 18:22:18
如果我正确地理解了这个问题，那么您希望有一个回调函数，当所有的表单元素都被更改时，这个回调函数就会被执行。据我所知，没有这样的事件。可以将更改后的窗体控件存储在数组中，并将数组的长度与窗体控件的长度进行比较：
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');
}
});https://stackoverflow.com/questions/29239622
复制相似问题
腾讯云开发者
