如果通过 AJAX 修改 DOM，则 HTML 表单提交事件丢失

Question

我有一个带有输入字段和提交按钮的表单。观察每个输入的模糊事件（使用原型），并为服务器端异步验证触发一个新的 Ajax.Request。 Ajax 响应文本通过更新错误文本和错误 div 样式来修改 DOM 树。一切正常，除了当我留下一些输入元素时，单击提交按钮，同时由于 AJAX 响应而修改了 DOM。

简而言之，如果同时通过 AJAX 调用修改了 DOM，则不会触发提交按钮的 onclick 事件和表单的 onsubmit 事件。

这是代码：

document.observe("dom:loaded", function() { $$('#customerForm input[type=text],#customerForm select').each(function(node){ node.observe("模糊",function(){ var formData=$('customerForm').serialize(true); var fieldName=this.name; var fieldId=this.id; var errDivId=this.id+'_err'; var errDiv=$(errDivId); var parent=$(errDiv.parentNode); formData['fieldName']=fieldName; 新的 Ajax.Request( 验证网址， { 方法：'发布'， 参数：formData， onComplete:函数（响应）{ var responseText=response.responseText; responseText=responseText.strip(); errDiv.innerHTML=responseText; if(responseText==""){ errDiv.removeClassName('errors'); parent.removeClassName('errors'); } 别的{ errDiv.addClassName('errors'); parent.addClassName('errors'); } } }); }); }); });

我做错了吗？或者，如果这是预期行为，是否有任何解决方法？预期的结果应该是表单提交，无论在按钮单击后是否修改了 DOM。

Answer 1

提示 1：尽量不要在 Ajax 请求上更新整个 DOM，这是一种更好的态度，只获取 JSON 响应并将值放入错误阵中

提示 2：不知道 Prototype（从未使用过），但 jQuery 除了标准的 bind() 之外还有 live()，它总是监听事件触发并通过在同一个元素上调用 die() 来杀死

/p>

希望这对您有所帮助

Answer 2

有一个很好的解决方法。我们可以使用变量跟踪提交按钮的焦点和模糊事件：

submitFocus=true/false. $('create').observe("focus",
    function(){
        submitFocus=true;
    });
$('create').observe("blur",function(){
     submitFocus=false;
});

根据这个值，如果submitFocus=true.，则应该延迟ajax响应更新操作

if(submitFocus)
   window.setTimeout(function(){
       updateError(responseText,errDiv,parentErrDiv); },500);
else
   updateError(responseText,errDiv,parentErrDiv);