为什么JQuery-ui对话框在改变动态内容时不保持布局

why JQuery-ui dialog doesn't keep layout when changing dynamic content?

本文关键字：布局对话框 JQuery-ui 改变动态为什么更新时间：2023-09-26

我试图动态更改对话框的内容，但是当我更改内容时，布局改变了。

基本上，我有…我从jquery-ui演示和想要改变

的内容… using html();

here my HTML

<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    <br />
    <ul id="suggestions0">
        <li id="suggestion0-0" class="suggestion">BLO</li>
        <li id="suggestion0-1" class="suggestion">BLU</li>
        <li id="suggestion0-2" class="suggestion">BLL</li>
            <li id="suggestion0-3" class="suggestion">BOO</li>
    <li id="suggestion0-4" class="suggestion">CLA</li>
    </ul>
    <div id="footer">
        <span id="manual-0" class="manual">MANUAL</span><span id="next-0" class="next">Next</span>
    </div>
    <br />
</div>

这就是我要展示的计划对话框。

我有两个按钮，如果我们点击确定，它只会显示当前的对话框没有修改，重要的是"li"元素在两行

BLO BLU blll BOOCLA XXX ....

但是当我动态更改内容时，"li"元素变成了一行而不是两行。

我想找出我做错了什么。

这里是点击

的HTML

<body>
    <?prettify lang=java linenums=false?>
    <pre class='prettyprint' >
        <code>
            <span class="highlightOK" id="highlight-0">OK</span>***********************<span class="highlightNOTOK" id="highlight-1">NOT OK</span>
</body>
$('span.highlightOK').click(function() {
    setTimeout(function(){ $( "#dialog" ).dialog(); }, 100);;
});
$('span.highlightNOTOK').click(function() {
    $("#suggestions0").html("<li id='test0-1' class='suggestion'>BLO</li><li id='test0-2' class='suggestion'>BLO</li><li id='test0-3' class='suggestion'>BLO</li><li id='test0-4' class='suggestion'>BLO</li><li id='test0-5' class='suggestion'>BLO</li><li id='test0-6' class='suggestion'>BLO</li>");
    setTimeout(function(){ $( "#dialog" ).dialog(); }, 100);;
});

我这里有一个现场演示http://jsfiddle.net/survivant/cyFxp/

在动态html中添加li元素之间的换行符似乎解决了这个问题

$("#suggestions0").html("<li id='test0-1' class='suggestion'>BLO</li>'n<li id='test0-2' class='suggestion'>BLO</li>'n<li id='test0-3' class='suggestion'>BLO</li>'n<li id='test0-4' class='suggestion'>BLO</li>'n<li id='test0-5' class='suggestion'>BLO</li>'n<li id='test0-6' class='suggestion'>BLO</li>");

http://jsfiddle.net/Qjbb3/