KendoDropdown放在fancybox弹出窗口=不好的做法？

Question

当我把Kendo下拉列表信息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.But中，我不知道在这种情况下使用iframe是否好…

Answer 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小部件的method ()方法可以解决很多问题。它解决了小部件的删除问题，除了DateTimePicker的三个辅助div中的一个，因此close看起来如下所示：

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

为了解决日期时间选择器的实际问题，我认为这是kendop框架中的一个bug (我将报告这一点，希望能得到一些反馈)，最后一个函数只需要扩展：

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

其他解决方案：

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

将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();
}

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