表單提交時沒有觸發當修改窗體在focusout處理程序

Question

我試圖將其歸結爲一個簡單的例子來演示我遇到了什麼。

我有一個表格具有輸入字段和提交按鈕：

<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演示代碼。我有點困惑。想法任何人？

Answer 1

問題似乎並不是執行提交，而是在按鈕上不執行click事件，因爲插入div後mouseup不在提交按鈕上。如果你在你的小提琴中使用標籤和空格，它就會起作用。此外，如果你的方式，提交按鈕不動添加的元素，它的工作原理：

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

或在這個例子：http://jsfiddle.net/K9vrW/3/