带有 AJAX 和验证器的 jQuery UI 对话框表单只能正常工作一次

Question

我一直在开发一个通过 AJAX 加载的简单 JQuery 对话框表单。它使用 JQuery 工具进行验证，如果成功，则通过 AJAX 提交并关闭。下面是通过 AJAX 打开对话框的代码（通过一个漂亮的小链接）：

<script type="text/javascript">
var activeDialog;
$(function (){
    $('a.ajax').click(function() {
        var dialogDiv = '<div style="display:hidden" id="dialogDiv" title="'+this.title+'"></div>';
        var dialog = $(dialogDiv).appendTo('body');
        // load remote content
        activeDialog = dialog.load(
            this.href, 
            {},
            function (responseText, textStatus, XMLHttpRequest) {
                dialog.dialog({
                    resizable: true,
                    title: this.title,
                    autoOpen: true,
                    height: 350,
                    width: 600,
                    modal: true,
                    close: function(event, ui) {
                        try {$("#addNoteForm").data("validator").destroy();}catch(e){}
                        $(this).dialog("destroy");
                    }
                });
            }
        );
        return false;
    });
});
</script>
<BR><BR>
<a class="ajax" href="dialog_clientEdit.php?cid=172" title="Add New Note">Create note</a>

如您所见，对话框是从页面“dialog_clientEdit.php”加载的。对话框加载它自己的处理脚本，一旦填写并成功提交，就通过 AJAX 发送数据，如果没有错误，则关闭自身并销毁验证器和对话框：

<div id="dialogNote9356904" title="Add New Note">
    <form action="process_note.php" method="post" name="addNoteForm" id="addNoteForm" class="form has-validation">
    <fieldset style="border:none;">
        <div class="clearfix">
            <label for="form-note" class="form-label">Note <em>*</em></label>
            <div class="form-input form-textarea"><textarea id="form-note" rows="5" name="note" required="required" /></textarea></div>
        </div>
        <div class="clearfix">
            <label for="form-notedate" class="form-label">Date <em>*</em><small>mm/dd/yyyy</small></label>
            <div class="form-input"><input type="date" id="form-notedate" name="date" data-value="03/05/2004" format="mm/dd/yyyy" required="required" /></div>
        </div>
        <div class="clearfix">
            <label class="form-label">Visibility <em>*</em><small>Private not visible to client</small></label>
            <div class="form-input"><label for="form-visibility-private"><input type="radio" name="visibility" id="form-visibility-private" value="private" checked /> Private</label> <label for="form-visibility-public"><input type="radio" name="visibility" id="form-visibility-public" value="public" /> Public</label></div>
        </div>
        <div class="form-action clearfix">
        <button class="button" id="submitNote" type="button" data-icon-primary="ui-icon-circle-check">Create Note</button>
            <button class="button" type="button" onClick="activeDialog.dialog("close");">Cancel</button>
            <span id="addDialogLoader"></span>
        </div>
    </fieldset>
    </form>
</div>
<script>
$('#submitNote').click(function () { 
    var form = $('#addNoteForm');
    if(form.data("validator").checkValidity()){
        var formData = $(form).serialize();
        // Save form via AJAX
        var ajax_load = "<img src='../images/ajax-loader.gif' alt='Saving...' />";
        var loadUrl = "process_note.php?cid=172";
        $("#addDialogLoader").html(ajax_load).load(loadUrl, formData, function(response, status, xhr) {
            if (status != "error") {
                if(response == "1"){
                    activeDialog.dialog("close");
                } else { alert("There was an error saving this note: "+response); }
            } else {
                 alert("An error occurred while performing your request: " + xhr.status + " " + xhr.statusText);
            }
        });
    }
    return false;
});
</script>

问题是这样的：表单只提交一个时间。您可以填写它，验证工作正常，并且所有 AJAX 都正确触发，每个人都很高兴。然后，当您第二次尝试时，验证器不再工作，并且单击“创建注释”按钮基本上不会执行任何操作...对话框永远不会提交，并且 AJAX 永远不会触发。

我确保在关闭后销毁对话框和验证器。对话框重新打开正常，但日期选择器在第二次打开时不起作用，不再进行验证并且表单无法提交。

抱歉，我包含了所有代码，但我真的不知道错误在哪里。我确信这与我关闭它（或重新打开它，或两者兼而有之）的方式有关。有人可以帮忙吗？

Answer 1

不确定您在提供的示例链接中做了什么，但是 (1) 该对话框甚至不会在 Mac 版 Chrome 中显示，(2) 它仅在 Windows 版 Firefox 5 中几乎无法工作，(3) 它完全不可用IE 9 中格式错误且布局混乱。

当我使用 Firebug 观察页面正在执行的操作时，它会看到大量语法错误和其他问题。我的猜测是，您要么有一个小错字，导致了级联效应，要么您的脚本中出现了更深层次的问题，导致了各种奇怪的行为。

如果我是你，我会自己在 Firebug 中查看它，尝试首先消除所有这些语法错误，然后从那里开始。

在 IE 9 下，即使我第一次尝试提交新的公开注释，也会收到以下错误弹出窗口：

Answer 2

经过大量测试后，我发现每次创建和关闭对话框时，剩余的表单及其元素仍保留在 DOM 中。对对话框的后续调用将在旧表单上触发，这就是日期选择器、验证和提交停止工作的原因。

为了解决这个问题，我只是在对话框函数的 Close 事件中替换了这一行：

$(this).dialog("destroy");

...用这一行：

$(this).dialog("destroy").remove();

这一行新行会销毁对话框，然后从 DOM 中删除保存对话框的 div（在以下情况下）上面的代码，由变量“dialogDiv”引用）。

所有问题都解决了！