Question

有一种方法让我在单击表单中的重置按钮后调用一个函数，我的意思是之后，所以首先重置表单，然后调用我的函数。正常事件冒泡会调用我的函数，然后才重置表单。现在我想避免使用setTimeout来执行此操作。

我需要的是在重置表单时调用函数，因为我使用统一和统一需要在值更改时更新。

目前我这样做：

//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);  
});

我尝试在$(':input').change()上执行此操作，但重置元素似乎不会触发更改事件。
预先感谢您的任何帮助。

Answer 1

HTML表单有一个onReset事件，你可以在里面添加你的调用：

function updateForm()
{
    $.each($('form').find(":input"), function(){  
        $.uniform.update($(this));  
    });  
}

<form onReset="updateForm();">

正如Frédéric Hamidi的评论中指出的那样，您也可以像bind那样使用$('form').bind('reset', function() { $.each($(this).find(":input"), function(){ $.uniform.update($(this)); }); });：

{{1}}

经过一些测试后，在重置发生之前出现两种方式，而不是之后。你现在这样做的方式似乎是最好的方式。

在此question

中找到了相同的结论

Answer 2

我还没有在所有浏览器中测试过，但您可以在点击事件中自行订购： 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
    });
});

Answer 3

前一段时间我在调试一个与谷歌IE相关的插件，我用一个冒泡的技巧解决了主要错误。这就是为什么我在这个解决方案中立即想到你的问题（当然应该是跨浏览器）：

<form>
    <div id="capture_bubble">
        <input type="text"><input type="reset">
    </div>
</form>

通过这种方式，您可以在触发重置事件后使用$（'＃capture_bubble'）捕获冒泡。

您可以使用以下方式进行快速测试：

(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);

请注意： this.form.reset（）; （由于杰夫威尔伯特观察所做的更改）

Answer 4

你不需要等待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);

Answer 5

尝试此解决方案

目标：

添加“点击”事件
防止默认操作（重置）
触发“重置”
运行所需的代码

示例：

$("button[type='reset']").on('click', function(evt) {
   evt.preventDefault();
   $(evt.target).trigger('reset');

   // enter code to run after reset
   $.each($(this).find(":input"), function(){  
      $.uniform.update($(this));  
   }); 

});

表单重置后调用函数

5 个答案: