javascript - 卸载/删除或重用已加载的 javascript

Question

我正在尝试将 jsp 文件加载到 jQuery UI 对话框中 http://jqueryui.com/demos/dialog/ . jsp 包含一个完整的日历 http://arshaw.com/fullcalendar/日历。控制台调用 calLoader.jsp，它或多或少只包含:

<jsp:include page="../cal.jsp"/>

当我第一次打开对话框时，一切正常，但在我关闭对话框并尝试再次打开它后，我从 Chrome 中得到以下堆栈跟踪:

Uncaught RangeError: Maximum call stack size exceeded
d.d.extend._Deferred.f.resolveWith
d.d.extend._Deferred.f.done
d.d.fn.d.ready
d.d.fn.d.init
d.d
(anonymous function)
d.d.extend.globalEval
ba
d.d.extend.each
d.fn.extend.domManip
d.fn.extend.append
d.fn.extend.html
d.fn.extend.load.d.ajax.complete
d.d.extend._Deferred.f.resolveWith
v
d.support.ajax.d.ajaxTransport.send.c

问题在 firefox 中是相同的，但我收到消息:

too much recursion
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 

我意识到我正在尝试加载多个相同的东西，并且它需要以某种方式重复使用或卸载/删除并重新加载，但我不知道该怎么做。

这是我用来打开日历的代码(被要求)。

function openCalendar() {
    var dialog = jQuery('<div id="calendaropener"></div>')
    .dialog({
        autoOpen: false,
        draggable: true,
        modal: false,
        resizable: false,
        width: 820,
        height: 750,
        position: [50, 50],
        title: 'Kalender',
        close: function(ev, ui) { calendarObj = null; }
    });
    dialog.load("calLoader.jsp");
    dialog.dialog('open');
}

函数 openCalendar() 是从我页面上的一个按钮调用的。 谢谢!

Answer 1

我的猜测是，在您关闭第一个元素后，它只是隐藏了，然后您创建了另一个具有相同 ID 的元素，这会导致加载过程出现问题。理想情况下，为了对 DOM 进行更多控制，我会先在主页中设置日历开启器 div，然后这样创建对话框:

$("#calendaropener").dialog(...

这可能会帮助您更轻松地管理/调试它。

如果你不想这样做，那么你可以尝试添加到你的关闭函数中:

close: function(ev, ui) { calendarObj = null; $(this).remove(); }

这将确保该元素已从 DOM 中移除，因此您不会因多次添加该元素而出现任何奇怪的问题。

最后，如果您只是想处理隐藏和重新打开(假设这不会破坏您的逻辑)，那么您可以有条件地触发 dialog.load("calLoader.jsp"); ，例如:

if($(dialogSelector).html().length == 0) {
    dialog.load("calLoader.jsp");
}

希望有帮助!