javascript - 关闭模式后页面变得无响应

Question

我正在创建一个酒店管理系统来管理客人和登记。

我的模态框的响应时间遇到问题。

我在模式内有一个取消按钮，可以关闭模​​式但不会重新加载页面。这是我在取消按钮中得到的内容:

 $("#cancel").click(function(event) {
     event.preventDefault();
     jQuery(".ui-dialog").dialog().dialog('close');
     jQuery(".ui-widget-overlay").dialog().dialog('close');
 });

问题是这样的: 当模式出现时(通过单击另一个按钮)，我单击“取消”，上面的代码将被执行。我这样做了很多次(打开模式并取消)，页面变得没有响应。执行超过 5 次后，您必须等待几分钟才能关闭模式。您甚至无法关闭浏览器的选项卡。

任何想法都会受到欢迎。谢谢。

PS。 我把系统上传到网上给大家看看。 http://greenenergiesllc.com/temp

Login: joel

Password: 1234

创建我的一些模态的 PHP 文件:https://www.dropbox.com/s/azi51w0pzp69kgh/checkin.php

有关如何创建模式的代码片段:

jQuery( "#ex4").dialog({
    height: 'auto',
    width: 450,
    modal: true,
    closeOnEscape: false,
    open: function(event, ui) {
        jQuery(this).parent().children().children('.ui-dialog-titlebar-close').hide();
    }, position: ["center", 100],
    resizable: false
});

编辑:

这就是我到目前为止所做的。我通过在关闭调用后添加 .remove 解决了创建过多对象的 DOM 问题。

 $("#cancel").click(function(event) {
     event.preventDefault();
     jQuery(".ui-dialog").dialog().dialog('close').remove();
     jQuery(".ui-widget-overlay").dialog().dialog('close').remove;
 });

但是，第一次关闭模态后，第二次就无法打开，并且出现此错误。 --> 更新:调用时使用删除不会恢复模式。我现在完全困惑该怎么办。我需要在使用 .remove() 调用时删除这些 DOM 元素，但在调用时我需要将它们带回来。

Uncaught TypeError: Cannot call method '_focusTabbable' of undefined 

Answer 1

不需要那样使用。尝试一下

$(".ui-dialog").dialog( "close" );
$("#cancel").click(function(event) {
 event.preventDefault();
 $(".ui-dialog").dialog( "close" );
 $(".ui-widget-overlay").dialog('close');
});