0

当我放置 Kendo Dropdown List info Fancybox - Popup 时出现问题。有关详细信息：我有页面 A：此页面包含 Kendo 下拉列表（id = #myDropdown）。我有页面 B：我把我的 Fancybox 调用者放在这里-我的意思是我使用 Fancybox 加载页面 A（通过 ajax）

一切看起来都很好，但我在这里遇到了一个问题：你知道，当我初始化下拉列表时，Kendo-UI 将为 UI 效果创建一个“锚”标签。例如：DropdownList 的 id = #myDropdown Kendo 将再创建一个 id = #myDropdown-list 的标签。

关闭 Fancybox-popup 后，“#myDropdown”已从 DOM 中删除，但“#myDropdown-list”。它仍然在DOM超时，并且在我再次调用弹出窗口后它愿意加倍（当然如果不刷新当前页面）。

和 Kendo-DateTimePicker 一样也一样。

p/s：如果英语太糟糕了，我很抱歉：D。我希望你能得到我的问题。

我要把我的“弹出窗口”放在 iframe 中。但我不知道在这种情况下使用 iframe 是否好......

4

1 回答 1

1

是否使用 IFrame 不是导致错误的原因。我尝试使用一个容器并且没有它来通过 ajax 加载fancybox，但这并没有什么不同。

我发现有点像黑客，但它解决了问题。假设我们有一个创建弹出窗口的代码，并且弹出窗口的内容位于 href 'popupFrame' 中：

$.fancybox({
    'href': 'popupFrame',
    'type': 'ajax',
    beforeClose: removeKendoHelpers
});

另一部分是在关闭弹出窗口之前调用的函数：

function removeKendoHelpers() {
    $("#myDropdown-list").remove();
}

当然，您可以将 removeKendoHelpers 创建为内联函数，如果要删除更多部分，则将该代码也放入 removeKendoHelpers 函数中。

一个有趣的评论：在 fancybox API 中，onCleanup 和 onClosed 被列为选项，但它们不起作用，而是使用 beforeClose 或 afterClose。

更新：

实际上，通过调用 kendo 小部件的 destroy() 方法可以解决很多问题。它解决了除 DateTimePicker 的三个帮助 div 之一之外的小部件的删除问题，因此关闭如下所示：

function removeKendoHelpers() {
    $("#myDropdown-list").data("kendoDropDownList").destroy();
    $("#datetimepicker").data("kendoDateTimePicker").destroy();
}

为了解决日期时间选择器的实际问题，我认为 kendop 框架中的一个错误（我会报告这个并希望得到一些反馈）最后一个函数只需要扩展：

$(".k-widget.k-calendar").remove();

其他解决方案：

这个更粗糙，但对我来说就像一个魅力，即使页面有多个剑道控件，即使你从你的幻想箱中打开另一个幻想箱。

将fancybox创建包装在一个函数中，例如：

function openFancyBox() {
    $("body").append("<div class='fancybox-marker'></div>");

    $.fancybox({
        'href': 'popupFrame',
        'type': 'ajax',
        beforeClose: removeKendoHelpers
    });
}

这将在 body 标签的最后创建一个新的 div，fancybox 结束时的函数使用这个：

function removeKendoHelpers() {
    $(".fancybox-marker").last().nextAll().remove();
    $(".fancybox-marker").last().remove();
}

我希望这些能解决你所有的问题！

于 2013-01-29T20:39:21.010 回答