0

我试图将其归结为一个简单的示例来演示我遇到的问题。

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

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

输入字段附加了一个焦点处理程序，该处理程序在输入下方插入一个新元素：

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 。我有点困惑。任何人的想法？

4

1 回答 1

1

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

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

或者在这个例子中：http: //jsfiddle.net/K9vrW/3/

于 2012-06-21T19:05:25.720 回答