jQuery提交事件处理程序只能工作一次

Question

我正在使用.submit()事件处理程序使用jQuery 1.6验证一个简单的表单,当表单无效时返回false:

$(function() {
  $('#my-form').submit(function(event) {
    if (true) {  // for testing, always go through the failure path
      alert("Invalid entry");
      return false;
    } else {
      return true;
    }
  });
});

如果用户进行了选择,则表单已正确提交.如果用户未进行选择,则会显示警报并且未提交表单(再次,正确).问题是在这种情况下,提交按钮不再有效.换句话说,一旦发生故障情况,用户就会停留在表单中,但单击提交按钮不会执行任何操作.

我已经验证了HTML(没有重复的ID,没有"提交","长度"等的名称/ ID).表单是动态加载的,因此使用Firebug进行测试是一个问题.表单上的其他事件处理程序工作正常(例如,我在字段值更改时看到警报).另一个奇怪之处:我将"return false"替换为"event.preventDefault();返回true",但表单仍然提交.(我以为.preventDefault()会阻止它.)

有任何想法吗？

编辑:这种方法有效:

$(function() {
  $('#my-form :submit').click(function(event) {
    if (...validation stuff goes here...) {
      alert("Invalid entry");
      return false;
    } else {
      $('#my-form').submit();
    }
  });
});

我仍然想知道我的original.submit()事件处理程序方法有什么问题.

Answer 1

您的表单很可能重新加载了一些ajax.

由于ajax仅重新加载页面的一部分,因此$(function() { yourCodeHere });不会再次运行.因此,您的onSubmit事件处理程序不会重新附加到您的表单.

使用此技术将onSubmit事件处理程序重新附加到表单

$('body').on('submit','#my-form', function() {
    if (true) {  // for testing, always go through the failure path
      alert("Invalid entry");
      return false;
    } else {
      return true;
    }
}

我们可以将人类语言翻译为"对于身体的任何变化,将onsubmit事件重新附加到具有id'my-form'的元素.

Answer 2

如果表单是动态加载的，您可以尝试使用.live()绑定事件。

像这样...

  $('#my-form').live('submit', function(event) {
    if (true) {  // for testing, always go through the failure path
      alert("Invalid entry");
      return false;
    } else {
      return true;
    }
  });