JQuery 对话框交替工作

Question

我有这段代码可以根据 2 个链接打开带有特定控件的 JQuery 对话框。 现在第一次尝试就可以正常工作。但是，当我第二次单击链接加载 JQuery 对话框时，它会打开一个空白对话框。关闭它并再次单击链接时，它会打开右侧的对话框。 经过反复试验，它在 JQuery 1.3.2.js 文件中抛出错误。

代码如下：

 $('#div1').dialog("destroy");            

 if (criteria1== "L") {
    $("#div1").html("<iframe id='dialogFrame1' src='../WebPages/abc.aspx'        
    Height='100%' Width='100%' frameborder='0'></iframe>");
  }
 else {
    $("#div1").html("<iframe id='dialogFrame2' src='../WebPages/abc1.aspx'    
  Height='100%' Width='100%' frameborder='0'></iframe>");
 }

 $('#div1').dialog(
 {

  height: 220,
  title: "Title",
  width: 500,
  modal: true,
  beforeclose: function (event, ui) {

      $("#div1").html("");
      $("#div1")[0].innerHTML = "";
    }

 });

 $('#div1').parent().appendTo($("form:first"));
 $('#div1').dialog('open');

我使用了错误的 JQuery 文件吗？关于如何解决这个问题有什么看法吗？

Answer 1

jsfiddle工作示例（它缺少jquery css/images）

所以如果我建议废弃你的代码已经给它看起来一团糟，而是这样做：

$(function(){
    var urls = {
        "hackernews" : "http://news.ycombinator.com", 
        "jsfiddle" : "http://jsfiddle.net"
    };

    var dialog = $("<div style='width:50%;height:50%;'>\
                   <iframe id='dialogFrame'\
                   src='#'  frameborder='0'></iframe></div>");


     dialog.dialog({
      height: 220, 
      title: "Title",
      width: 500,
      modal: true,
      autoOpen: false
    });

    $('#btn1, #btn2').click(
        function(){
            var urlIndex = $(this).attr('rel');
            if(!urlIndex) return;
            $('#dialogFrame', dialog).attr('src', urls[urlIndex]);
            dialog.dialog('open');
         }
    );
    $('#btnClose').click(
        function(){
            dialog.dialog('close');
        }
    );

});

HTML：

<input type="button" id="btn1" rel="jsfiddle" value="dialog1" />
<input type="button" id="btn2" rel="hackernews" value="dialog2" />
<input type="button" id="btnClose" value="Close">​

因此，我们不是在对话框之间切换并更改内部 HTML，而是保持一个对话框始终可用，当要显示该对话框时，我们设置 iframe 的 url 并显示该对话框。

所有 url 都保存在关联数组中，单击事件处理程序会检查单击按钮的 rel 属性以确定应显示哪个 url。

有道理吗？

显然，您需要更改 HTML 和 dialo-properties 的 URL 和属性。

Answer 2

编辑：误解了问题，第二次尝试：

无法重现您的问题，已尝试 http://jsfiddle.net /GYxwG/3/。我确实必须删除您的 $('#div1').parent().appendTo($("form:first")); 但是，因为它根本不起作用地方。该语句可能不会执行您认为的操作，因为一旦您在 div 上调用 .dialog()，div 就会从其位置移出并包含在各种对话框中。因此 .parent() 引用对话框的内部包装器之一。不是整个对话框，也不是原始文档中的父元素。

因此，将对话框中最接近的父级移动到 div 没有什么意义，并导致“未指定”的行为，也许您看到了一些边缘情况？