jquery - 提交后清除 Rails 远程表单

Question

我正在使用带有 jQ​​uery 的 Rails 3，并且有一个带有单个文本输入和提交按钮的简单表单。我使用 :remote => true 提交表单，并希望在表单提交后清除输入。我尝试了这个 jQuery 代码:

$('#new_message').submit(function() {
  $('#message_content').val('');
});

但是，这会在提交表单之前清除输入，因此我最终会提交一个空白表单。

经过一番搜索后，我还尝试了以下版本:

$('#new_message').submit(function(e) {
  e.preventDefault();
  this.submit();
  $('#message_content').val('');
});

...但这似乎覆盖了 :remote => true 魔法，并且表单通过整个页面重新加载来提交。有什么想法吗？

Answer 1

当按下标记为 remote => true 的表单的提交按钮时，rails.js 中的 JavaScript 代码会执行 submit()。您无需覆盖该功能。

在 $(document).ready 中尝试此操作 -

(编辑:使用绑定(bind)而不是实时。谢谢达伦·希克斯。)

$("#new_message").bind("ajax:complete", function(event,xhr,status){
  $('#message_content').val('');
}

这会为 ajax:complete 事件添加一个事件处理程序。当您的 ajax-submit-form 完成时会触发此事件。更多 here .

编辑:

不要忘记关闭 bind 方法上的 )。

$("#new_message").bind("ajax:complete", function(event,xhr,status){
   $('#message_content').val('');
 })