javascript 表单重置后调用函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8152904/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Call a function after form reset
提问by Virgil Balibanu
Is there a method for me to call a function after click on the reset button in form, and I mean after, so that the form is first reset and then my function called. Normal event bubbling would call my function and only then reset the form. Now I would like to avoid setTimeout in order to do this.
单击表单中的重置按钮后，是否有一种方法可以让我调用函数，我的意思是在此之后，以便首先重置表单，然后调用我的函数。正常的事件冒泡会调用我的函数，然后才重置表单。现在我想避免 setTimeout 来做到这一点。
What I need is to call a function when a form is reset because I use uniform and uniform needs to be updated when values change.
我需要的是在重置表单时调用一个函数，因为我使用统一和统一需要在值更改时更新。
At the moment I do it like this:
目前我这样做：
//Reset inputs in a form when reset button is hit
$("button[type='reset']").live('click', function(){
elem = this;
//Sadly we need to use setTimeout to execute this after the reset has taken place
setTimeout(function(){
$.each($(elem).parents('form').find(":input"), function(){
$.uniform.update($(this));
});
}, 50);
});
I tried to do al this on $(':input').change()but reseting an element does not seem to trigger the change event.
Thank you in advance for any help.
我试图这样做，$(':input').change()但重置元素似乎不会触发更改事件。
预先感谢您的任何帮助。
采纳答案by Jeff Wilbert
HTML forms do have an onReset event, you can add your call inside there:
HTML 表单确实有一个 onReset 事件，您可以在其中添加您的调用：
function updateForm()
{
$.each($('form').find(":input"), function(){
$.uniform.update($(this));
});
}
<form onReset="updateForm();">
As pointed out in the comment by Frédéric Hamidiyou can also use bindlike so:
正如Frédéric Hamidi在评论中指出的，您也可以bind像这样使用：
$('form').bind('reset', function() {
$.each($(this).find(":input"), function(){
$.uniform.update($(this));
});
});
After some testing it appears both ways fire before the reset takes place and not after. The way your doing it now appears to be the best way.
经过一些测试，它似乎在重置发生之前而不是之后双向触发。你现在这样做的方式似乎是最好的方式。
The same conclusion was found in this questionhere
在这个问题here中找到了相同的结论
回答by vol7ron
I haven't yet tested in all browsers, but you can do your own ordering within a click event: http://jsfiddle.net/vol7ron/9KCNL/1/
我尚未在所有浏览器中进行测试，但您可以在点击事件中进行自己的排序：http: //jsfiddle.net/vol7ron/9KCNL/1/
$(document).ready(function() {
$("input:reset").click(function() { // apply to reset button's click event
this.form.reset(); // reset the form
window.alert($("input:text").val()); // call your function after the reset
return false; // prevent reset button from resetting again
});
});
回答by Igor Parra
Time ago I worked debugging a Google IE related plugin and I solved the main error with a bubbling trick. That's why I think immediately in this solution for your problem (of course should be cross-browser):
前段时间我调试了一个与谷歌 IE 相关的插件，我用冒泡技巧解决了主要错误。这就是为什么我立即在这个解决方案中考虑您的问题（当然应该是跨浏览器的）：
<form>
<div id="capture_bubble">
<input type="text"><input type="reset">
</div>
</form>
In this way you can capture the bubbling with $('#capture_bubble') after reset event be triggered.
通过这种方式，您可以在触发重置事件后使用 $('#capture_bubble') 捕获冒泡。
You can make a quick test with:
您可以使用以下方法进行快速测试：
(function($) {
$(function() {
$('#capture_bubble').live('click', function(){
console.debug('capture_bubble');
alert('capture_bubble')
})
$("input[type='reset']").live('click', function(){
this.form.reset(); // forcing reset event
console.debug('reset');
alert('reset')
});
});
})(jQuery);
Please note: this.form.reset();(change made due to a jeff-wilbert observation)
请注意：this.form.reset(); （由于 jeff-wilbert 观察而做出的更改）
回答by code_monk
you shouldn't need to wait 50 milliseconds. If you use setTimeout with a timeout of zero, it effectively means "push this code onto the event stack". Since the form-reset is guaranteed to have fired first, the code in the setTimeout is guaranteed (in well behaved javascript interpreters) to have access to the form values you want (post-reset). You should be able to use the code below, guilt-free.
您不需要等待 50 毫秒。如果您使用 setTimeout 的超时为零，它实际上意味着“将此代码推送到事件堆栈上”。由于保证首先触发表单重置，因此保证 setTimeout 中的代码（在表现良好的 javascript 解释器中）可以访问您想要的表单值（重置后）。您应该可以毫无愧疚地使用下面的代码。
var afterReset = function(){
var pushMeOntoTheEventStack = window.setTimeout(function(){
$("#form input").each(function(){
console.log( this.name + ' = ' + this.value );
});
},0);
};
$("#form").on("reset",afterReset);
