JQuery的奇怪行为：多个对话框

我面临JQuery的一个奇怪行为，我确信它与JQuery有关，而不是与我在整个实现中使用的jtable有关

我有两个用于编辑和删除的列，我自定义了这两个列，并将其替换为jTabel默认功能。我一单击编辑按钮，dailog就显示出来进行编辑。我取消并再次单击jtabel行的任何部分，它再次打开我之前打开的用于编辑记录的相同对话框。此外，如果我随后单击“删除”按钮，它将再次打开相同的对话框（即编辑）对话框

我搜索过，有人说使用$（“dialog form”）.dialog（'destroy'）.remove（）；它可以工作，但在再次切换之后，我无法与“编辑”对话框交互，因为它的div被完全删除。我也只尝试了$（“对话形式”）.destroy（“”）。它的行为非常怪异。正因为如此，我的部分视图并没有在JQuery对话框上呈现，而我正在使用JQuery对话框的“open”方法进行呈现，而是在jtable之前分派整个HTML

此外，我还观察到了密切相关的问题， 如果我先单击“删除”，然后单击“编辑”，它会打开“先前删除表单”，并在彼此上弹出“编辑表单”

附加图像（编辑后单击“删除”时）

即使我单击了jtable的行，但没有单击jtable的delete列上的delete图标，编辑对话框也会打开。

这是我的全部代码：

<div id="PersonTableContainer"></div>
<script type="text/javascript">
var rowID;
var retEditDialogDiv;

$("#dialogEdit-form").dialog(
    {
        autoOpen: false,
        title: "Edit Person",
        height: 380,
        width: 600,
        show: { effect: 'fold', direction: "up" },
        modal: true,

        open: function (event, ui) {
            var ID = rowID;
            $(this).load("Person/Edit", { a_id: rowID });
        },
        buttons:
        {
            "Cancel": function () {
                $("#dialogEdit-form").dialog('close');
            },

            "Save": function () {
                $("#update-message").html(''); //make sure there is nothing on the message before we continue

                $("#UpdatePersonForm").submit();
                $("#dialogEdit-form").dialog('close');
            }
        }
    });
//}//end of ready
$(document).ready(function () {
    $('#PersonTableContainer').jtable(
        {

            title: 'Person List',
            paging: true, //Enable paging
            sorting: true, //Enable sorting
            defaultSorting: 'Name ASC',
            selecting: true,
            addNewRecord: false,
            addRecordButton: false,
            showCloseButton: true,

            multiselect: true, //Allow multiple selecting
            selectingCheckboxes: true, //Show checkboxes on first column
            selectOnRowClick: false, //Enable this to only select using checkboxes

            actions:
            {
                listAction: '@Url.Action("GetPersons")'
            },
            toolbar:
            {
                hoverAnimation: true, //Enable/disable small animation on mouse hover to a toolbar item.
                hoverAnimationDuration: 60, //Duration of the hover animation.
                hoverAnimationEasing: undefined, //Easing of the hover animation. Uses jQuery's default animation ('swing') if set to undefined.

                items:
                [{
                    icon: '/Content/images/Misc/addRecordButton.png',
                    text: 'Add new record',

                    click: function () {
                        $("#dialog-form").dialog("open");
                    }
                }]
            },
            fields:
            {
                PersonId:
                {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },

                FirstName:
                {
                    title: 'First Name',
                    width: '15%',
                    sorting: true,
                    selecting: true,
                },
                LastName:
                {
                    title: 'Last Name',
                    width: '15%',
                    sorting: true,
                    selecting: true,
                },
                Email:
                {
                    title: 'Email Address',
                    width: '20%',
                    list: true,
                    sorting: true,
                    selecting: true,
                },
                DOB:
                {
                    title: 'DOB',
                    width: '15%',
                    type: 'date',
                    displayFormat: 'yy-mm-dd',
                    visibility: 'hidden',
                    list: false,
                    selecting: true
                },
                Title:
                {
                    title: 'Title',
                    width: '15%',
                    list: true,
                    sorting: true,
                    selecting: true,

                },
                Password:
                {
                    Password: 'Password',
                    width: '12%',
                    visibility: 'hidden',
                    list: false
                },
                Institute:
                {
                    title: 'Institute',
                    width: '10%',
                    create: true,
                    edit: true,
                    sorting: true,//This column is not sortable!
                    list: true,
                    selecting: true,
                },
                Roles:
                {

                    title: 'Role',
                    width: '10%',
                    options: '@Url.Action("GetRoles")',
                    defaultValue: 'Professors/User',
                    create: true,
                    edit: true,
                    sorting: true,//This column is not sortable!
                    list: true,
                    selecting: true,
                },
                Edit:
                {
                    title: '',
                    sorting: false,
                    edit: false,
                    create: false,
                    listClass: 'child-opener-image-column',
                    display: function (data) {
                        var $img = $('<img class="child-opener-image" src="/Content/images/Misc/editRecordButton.png" title="Edit record" />');

                        //Open EditPerson Dialog Box when user clicked Edit

                        $img.click(function () {
                            $('.jtable-data-row').click(function () {
                                rowID = $(this).attr('data-record-key');    
                                $("#dialogEdit-form").dialog("open");
                            });
                        });

                        return $img;
                    }
                },
                Delete:
                {
                    title: '',
                    sorting: false,
                    edit: false,
                    create: false,
                    listClass: 'child-opener-image-column',
                    display: function (data) {
                        var $img = $('<img class="child-opener-image" src="/Content/images/Misc/deleteRecord_Simple.png" title="Delete record" />');

                        //Open DeletePerson Dialog Box when user clicked Delete

                        $img.click(function () {
                            $('.jtable-data-row').click(function () {
                                rowID = $(this).attr('data-record-key');
                                $("#dialog-confirm").dialog("open");
                            });
                        });

                        return $img;
                    }
                }
            }
        });

    $('#PersonTableContainer').jtable('load');
    $('#PersonTableContainer').css("float", "left").width(1200).css('margin-left', '-20px');
});

$("#dialog-form").dialog(
    {
        autoOpen: false,
        title: "Create Person",
        height: 380,
        width: 600,
        show: { effect: 'fold', direction: "up" },
        modal: true,

        open: function (event, ui) {
            $(this).load("@Url.Action("Create")");
        },
        buttons:
        {
            "Cancel": function () {
                $("#dialog-form").dialog("close");
            },

            "Save": function () {
                $("#update-message").html(''); //make sure there is nothing on the message before we continue

                $("#createPersonForm").submit();
                $("#dialog-form").dialog('destroy');

            }
        }
    });
$("#dialog-confirm").dialog(
    {
        autoOpen: false,
        title: "Delete Person",
        height: 180,
        width: 380,
        show: { effect: 'fold', direction: "up" },
        modal: true,
        buttons:
        {
            "Cancel": function () {
                $(this).dialog('destroy');
            },
            "Delete": function () {
                $("#update-message").html(''); //make sure there is nothing on the message before we continue
                $("#dialog-confirm").dialog('close');


                $.ajax({
                    type: "POST",
                    url: "Person/DeletePerson",
                    data: { PersonId: rowID },
                    success: PersonDeleted
                });
            }
        }
    });
function PersonDeleted(result) {
    $('.alert-box').html("Person Deleted");
    $('.alert-box').css("display:Block");
    $('.alert-box').css("float", "left").width(1130).css('margin-left', '-20px');
    $('.alert-box').delay(400).slideDown(400).delay(1000).slideUp(400);

    $('#PersonTableContainer').jtable('load');
}
</script>

var rowID；
变量retEditDialogDiv；
$（“#对话框编辑表单”）。对话框(
{
自动打开：错误，
标题：“编辑人”，
身高：380，
宽度：600，
显示：{效果：“折叠”，方向：“向上”}，
莫代尔：是的，
打开：功能（事件、用户界面）{
var ID=rowID；
$（this）.load（“Person/Edit”，{a_id:rowID}）；
},
按钮：
{
“取消”：函数（）{
$（“#dialogEdit form”）.dialog（'close'）；
},
“保存”：函数（）{
$（“#更新消息”）.html（“”）；//继续之前，请确保消息中没有任何内容
$（“#UpdatePersonForm”）.submit（）；
$（“#dialogEdit form”）.dialog（'close'）；
}
}
});
//}//准备好了吗
$（文档）.ready（函数（）{
$（“#PersonTableContainer”）.jtable(
{
标题：“人员名单”，
分页：true，//启用分页
排序：true，//启用排序
defaultSorting:“名称ASC”，
选择：对，
addNewRecord:false，
addRecordButton:false，
showCloseButton：正确，
multiselect:true，//允许多个选择
选择复选框：true，//在第一列上显示复选框
selectOnRowClick:false，//启用此选项以仅使用复选框进行选择
行动：
{
listAction:“@Url.Action（“GetPersons”）”
},
工具栏：
{
hoverAnimation:true，//启用/禁用鼠标悬停到工具栏项上的小动画。
hoverAnimationDuration:60，//悬停动画的持续时间。
悬停动画定义：未定义，//放松悬停动画。如果设置为未定义，则使用jQuery的默认动画（“swing”）。
项目：
[{
图标：'/Content/images/Misc/addRecordButton.png'，
文本：“添加新记录”，
单击：函数（）{
$（“#对话框窗体”）。对话框（“打开”）；
}
}]
},
领域：
{
人物：
{
关键：没错，
创建：false，
编辑：false，
列表：false
},
名字：
{
标题：“名字”，
宽度：“15%”，
排序：对，
选择：对，
},
姓氏：
{
标题：“姓氏”，
宽度：“15%”，
排序：对，
选择：对，
},
电邮：
{
标题：“电子邮件地址”，
宽度：“20%”，
列表：正确，
排序：对，
选择：对，
},
出生日期：
{
标题：“DOB”，
宽度：“15%”，
键入：“日期”，
显示格式：“年月日”，
可见性：“隐藏”，
列表：false，
选择：真
},
标题：
{
标题：“标题”，
宽度：“15%”，
列表：正确，
排序：对，
选择：对，
},
密码：
{
密码：“Password”，
宽度：“12%”，
可见性：“隐藏”，
列表：false
},
学会：
{
标题：“研究所”，
宽度：“10%”，
创造：真的，
编辑：对，
排序：true，//此列不可排序！
列表：正确，
选择：对，
},
角色：
{
标题：“角色”，
宽度：“10%”，
选项：'@Url.Action（“GetRoles”），
defaultValue:'教授/用户'，
创造：真的，
编辑：对，
排序：true，//此列不可排序！