Question

我试图将其简化为一个简单的例子，以证明我遇到了什么。

我有一个带有输入字段和提交按钮的表单：

<form id="focusOutAfterInputForm">
  <input type="text" id="focusoutAfterInput">
  <input type="submit" >
  <div></div>
</form>

输入字段附有一个focusout处理程序，它在输入下面插入一个新元素：

jQuery("#focusoutAfterInput").focusout(function() {
  jQuery(this).after("<div>message</div>");
});

我还附加了一个提交处理程序，用于捕获提交是否已运行：

jQuery("form").submit(function() {
  jQuery("#console").append("<li>submitted form" + this.id + "</li>");
  return false;
});

如果将光标放入输入并单击提交按钮，则不会触发提交处理程序。如果第二次点击提交按钮，它将会触发。此外，如果字段模糊，然后按下提交按钮，它将触发。

但是，如果我们在表单中的div下面插入新元素，即使插入了元素，也会触发提交按钮：

<form id="focusoutAfterDivForm" novalidate="novalidate">
  <input type="text" id="focusoutAfterDiv" required="true">
  <input type="submit" >
  <div></div>
</form>

jQuery("#focusoutAfterDiv").focusout(function() {
  jQuery(this).parent().last().after("<div>message</div>");
});

这是展示代码的jsfiddle。我有点困惑。任何想法？

Answer 1

问题似乎不是没有执行提交，而是按钮上没有执行click事件，因为插入div后鼠标不在提交按钮上。如果您在小提琴中使用制表符和空格，则可以使用。此外，如果您以提交按钮不移动的方式添加元素，则它可以工作：

jQuery("#focusoutAfterInput").focusout(function() {
  jQuery(this).next().after("<div>message</div>");
});

或在此示例中：http://jsfiddle.net/K9vrW/3/

在焦点处理程序中修改表单时，表单提交不触发

1 个答案: