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

Question

我有一个带有输入字段和提交按钮的表单。观察每个输入的模糊事件(使用原型(prototype))，并触发一个新的 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("blur",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;            new Ajax.Request(                validateUrl,                 {                    method: 'post',                     parameters: formData,                    onComplete:function(response){                        var responseText=response.responseText;                        responseText=responseText.strip();                        errDiv.innerHTML=responseText;                        if(responseText==""){                            errDiv.removeClassName('errors');                            parent.removeClassName('errors');                        }                        else{                            errDiv.addClassName('errors');                            parent.addClassName('errors');                        }                }            });        });    });}); 

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

Answer 1

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

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

希望这能有所帮助