Question

我正面临着JQuery的一个奇怪的行为，我确信它与JQuery有关，而不是我用于整个实现的jtable。

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

我搜索过，人们说使用$（“dialog-form”）。dialog（'destroy'）。remove（）;它工作，但在病房再次我无法与编辑对话框交互，因为它的div被完全删除。我也只尝试过$（“dialog-form”）。destroy（''）。它有完全奇怪的行为。因为它，我的部分视图不会在JQuery Dialog上呈现，我正在使用它的“开放”方法，而是在jtable之前调度整个HTML。

此外，我观察到强烈相关的问题，如果我先单击“删除”然后单击“编辑”，则会先打开删除表单，然后同时弹出编辑表单。

附加图像（编辑后点击删除时）

enter image description here

即使我点击jtable的行而不点击jtable的删除列上的删除图标，编辑对话框也会打开。 enter image description here

这是我的整个代码：

<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>

如果有人面临同样的问题而已经解决，或者可以帮助我。我非常感激。

提前致谢。问候，乌斯曼

Answer 1

我弄清楚自己。我以嵌套的方式将hide（）应用于hide（）。此外，user88243的评论帮助了我更多。我立即打开对话框应用了return false，它对我有用。

Jquery Dialog - div disappears after initialization

最诚挚的问候乌斯曼

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

1 个答案: