我在使用 jQuery 工具选项卡 (AJAX) 和 jQuery UI 对话框(手动为对话框执行 AJAX 加载)时遇到问题。问题是该对话框是专门为当前选项卡加载和设置的(通过 AJAX 在选项卡请求中加载,以及选项卡的内容)。jQuery UI 在创建对话框时,将容器从其原始位置移除,添加其标记,并将其附加到正文。
问题是该对话框现在位于选项卡内容之外,并且不会在后续选项卡更改时被替换/删除。如果用户单击另一个选项卡或后退按钮(这些选项卡具有使用 URL 哈希的 AJAX 历史记录,因此实际上并未重新加载页面),则对话框会损坏但不会被删除,因为 jQuery UI 对话框将其移出选项卡内容。它现在只显示在身体的底部。如果用户物理单击关闭按钮,我为此编写了一个“hack around”,但是如果按下后退按钮或通过 AJAX 加载另一个选项卡并且 jQuery UI 实际上将其移回底部,则不会触发此操作身体(不知道它是如何/为什么这样做的!)。有什么建议么?如果我对此不清楚,请告诉我。谢谢!(这是我现在得到的,
$('.openMyDialog').click(function() {
// Create div for dialog
$('body').append('<div id="modalContainer"></div>');
// Load dialog with AJAX
$('#modalContainer').load('loadMyAjaxContent.html').dialog({
modal: true,
width: 850,
open: function(type,data) {
// Remove from bottom of body and put it back into the tab's content
$(this).parent().appendTo('.panes div:first');
},
close: function() {
$(this).dialog('destroy');
$('#modalContainer').remove();
}
});
});