更改包含jQuery对话框的html

Question

我有一个带有jQuery UI对话框的html。 然后我改变包含对话框的div。
但对话框的内容不会改变。 我想能够将对话框及其包含的div一起更改。
如果我只改变对话框div，它按预期工作，但这不是我所需要的。

示例代码： http://jsfiddle.net/JpLzh/13/

对话框中的文本应该从“原始”更改为“新”，但事实并非如此。
对话框外的文字确实从“主”改变为“主要改变”。

我在做什么错，我该如何克服这个问题？

编辑
即使在更改发生之前，我也需要对话框工作。在创建html之后，更改可能会发生很长时间。

的HTML

<div id="main"> 
main 
<br> 
<button id="opener">Open Dialog</button> 
<div id="dialog"> 
    original 
</div> 
</div> 
<script> 
$("#dialog").dialog({ 
      autoOpen: false, 
      height: 500, 
      width: 800, 
      modal: true, 
      resizable:false, 
      draggable:true, 
}); 

$("#opener").click(function() { 
    $("#dialog").dialog("open"); 
}); 
</script> 

在onload的JavaScript

$('#main').html('<div id="main">altered main<br><button id="opener">Open Dialog</button><div id="dialog">new</div></div>'); 
$("#dialog").dialog({ 
      autoOpen: false, 
      height: 500, 
      width: 800, 
      modal: true, 
      resizable:false, 
      draggable:true, 
}); 

$("#opener").click(function() { 
    $("#dialog").dialog("open"); 
}); 

Answer 1

我找到了一个解决方案。 看起来像我不能改变它的包含div对话框，因为它已经是一个由.dialog（）方法对话框，当我改变包含HTML它不会影响已经创建的对话框。

我发现的解决方案是使用.destroy（）方法销毁旧对话框，然后从新改变的html中创建一个新对话框。

我的解决方案： http://jsfiddle.net/JpLzh/12/

<div id="main"> 
main 
<br> 
<button id="opener">Open Dialog</button> 
<button id="changer">Change div</button> 
<div id="dialog"> 
    original 
</div> 
</div> 
<script> 
$("#dialog").dialog({ 
      autoOpen: false, 
      height: 500, 
      width: 800, 
      modal: true, 
      resizable:false, 
      draggable:true, 
}); 

$("#opener").click(function() { 
    $("#dialog").dialog("open"); 
}); 
</script> 


function change_div() 
{ 
$("#dialog").dialog("destroy"); 
$('#main').html('<div id="main">altered main<br><button id="opener">Open Dialog</button><div id="dialog">new</div></div>'); 

$("#dialog").dialog({ 
      autoOpen: false, 
      height: 500, 
      width: 800, 
      modal: true, 
      resizable:false, 
      draggable:true, 
}); 

$("#opener").click(function() { 
    $("#dialog").dialog("open"); 
}); 
} 


$("#changer").click(function() { 
    change_div(); 
}); 

Answer 2

你复制你的脚本代码，但是代码的运行是在HTML部分之一（标记之间），并且丢失来自javascript部分的第1行。

你应该把你的Javascript的一部分这里面：

$(document).ready(function() { 
    //JS Code here... 
}); 

，并删除HTML中的一部分。

检查：http://jsfiddle.net/fabio_silva/6Ypck/

Answer 3

处理就会产生此之后的HTML代码使用此代码，将工作吧.....

$('#main').html('<div id="main">altered main<br><button id="opener" onclick="OpenDialog();">Open Dialog</button><div id="dialog">new</div></div>'); 
$("#dialog").dialog({ 
      autoOpen: false, 
      height: 500, 
      width: 800, 
      modal: true, 
      resizable:false, 
      draggable:true, 
}); 

function OpenDialog() { 
    $("#dialog").dialog("open"); 
} 

<div id="main"> 
main 
<br> 
<button id="opener" onclick="OpenDialog()">Open Dialog</button> 
<div id="dialog"> 
    original 
</div> 
</div> 
<script> 
$("#dialog").dialog({ 
      autoOpen: false, 
      height: 500, 
      width: 800, 
      modal: true, 
      resizable:false, 
      draggable:true, 
}); 

function OpenDialog() { 
    $("#dialog").dialog("open"); 
} 
</script> 

Answer 4

这是因为你创建2个对话框。若要更改对话框的内容，所有你需要做的是改变对话框的div：

<div id="main"> 
     main 
     <br> 
     <button id="opener">Open Dialog</button> 
      <button id="changer">change Dialog</button> 
     <div id="dialog"> 
      original 
     </div> 
    </div> 
<script> 
    $("#dialog").dialog({ 
        autoOpen: false, 
        height: 200, 
        width: 200, 
        modal: true, 
        resizable:false, 
        draggable:true, 
    }); 

     $("#opener").click(function() { 
      $("#dialog").dialog("open"); 
     }); 


     $("#changer").click(function() { 
      $("#dialog").html("new"); 
     }); 
</script> 

Answer 5

当您从元素#dialog一个对话框，该元件被移出其原来的母公司（#main）的。如果在显示对话框时更改父对象的内容，则不会更改对话框（这是一件好事，否则对话框将被删除）。

你需要做的是进行单独更改对话框内容：

$('#main').html('The new content except #dialog'); 
$('#dialog').html('New dialog contents'); 

（顺便说一句，你不应该这样做：$('#main').html('<div id="main">...')你改变内 HTML内容，所以你不应该重复容器。否则结果是<div id="main"><div id="main">...）