Я столкнулся с странным поведением JQuery, я уверен, что это связано с JQuery, а не с jtable, который я использую для всей моей реализации.Странное поведение JQuery: несколько диалогов
У меня есть два столбца для редактирования и удаления, которые я настроил и заменил с помощью функции jTabel по умолчанию. Как только я нажму кнопку «Редактировать», появится «Дайлог» для редактирования. Я отменяю и снова нажимаю на любую часть строки jtabel, она снова открывает тот же диалог, который я открыл ранее для редактирования записи. Более того, если я нажму кнопку «удалить», он снова откроет диалог диалога (т.е. отредактирует).
Я искал, люди сказали, что используют диалоговое окно $ (диалоговое окно). Dialog ('destroy'). Remove(); он работает, но после палат снова я не могу взаимодействовать с диалогом редактирования, так как он полностью удален. Я также пробовал только с $ ("dialog-form"). Destroy (''). Это совершенно странное поведение. Из-за этого мой Partial View не отображается в диалоговом окне JQuery, который я делаю на его «открытом» методе, вместо этого отправляет весь HTML перед jtable.
Кроме того, я наблюдал сильно связанную проблему, Если я сначала щелкнув delete, а затем нажмите кнопку «Редактировать», он откроет форму для удаления и добавит форму редактирования друг на друга.
Прикрепленные изображения (При нажатии Delete после редактирования) диалогового окна
Редактирование открывается даже я нажал строку JTable и не нажав на иконку удаления на JTable Колонка удаления. 
Это весь мой код:
<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>
Если кто-то сталкивается с теми же вопрос и решить, или может помочь мне. Я был бы очень обязан.
Заранее спасибо. С уважением, Usman