jQuery UI对话框的行为异常 [英] jQuery UI Dialog behaves unpredictably

问题描述

jQuery UI对话框使我无所适从.据我所知，它是这样工作的:

The jQuery UI dialog drives me up the walls. To the best of my understanding, here's how it works:

当您执行$('#myDialog').dialog({...})时，它将复制#myDialog元素并将其移动到body标签底部此奇怪的小部件中.这太疯狂了！执行此操作时，它将复制可能唯一的DOM元素(带有ID).

When you do $('#myDialog').dialog({...}), it copies the #myDialog element and moves it inside this bizarre widget thing at the bottom of your body tag. This is crazy! It will duplicate possibly unique DOM elements (with ids) when it does this.

所以我想做的是在刷新原始元素(#myDialog)的HTML时使其以可预测的方式运行.如果我动态地执行此操作，有时对话框将不再打开:

So what I'm trying to do is make it behave in a predictable way when I refresh the HTML of the original element (#myDialog). If I do this dynamically, sometimes the dialog doesn't open any more:

http://jsfiddle.net/t67y7/3/

有时，对话框会使用旧的HTML打开(因为那样会缓存在页面底部).这是怎么回事?

Or sometimes the dialog opens with the old HTML (because it's cached at the bottom of the page that way). What is up with this?

推荐答案

为什么不直接在close函数上调用$(#dialogId").dialog("destroy")，如下所示:

Why don't you just call $("#dialogId").dialog("destroy") on close function, like this:

$("#dialogId").dialog({
     close: function() {
         $(this).dialog("destroy");
         // you may want empty content after close if you use AJAX request to get content for dialog
         $(this).html('');
     }
}

destroy函数将删除修饰的代码，并且下次显示对话框时，dialog元素将不会重复.

The destroy function will remove the decorated code, and your dialog element will not be duplicate next time you show the dialog.

我向 jsfiddle.net示例中添加了示例代码.

I added a sample code to jsfiddle.net example.

这篇关于jQuery UI对话框的行为异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！