Javascript 为什么JQuery ui对话框没有'；更改动态内容时是否不保留布局？_Javascript_Jquery_Jquery Ui_Jquery Resizable

Javascript 为什么JQuery ui对话框没有'；更改动态内容时是否不保留布局？

javascript jquery jquery-ui

Javascript 为什么JQuery ui对话框没有'；更改动态内容时是否不保留布局？,javascript,jquery,jquery-ui,jquery-resizable,Javascript,Jquery,Jquery Ui,Jquery Resizable,我试图动态更改对话框的内容，但当我更改为内容时，布局也会更改基本上，我有一个。。。我从jQueryUI演示中获取，并希望使用html（）更改…的内容这是我的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, resi

我试图动态更改对话框的内容，但当我更改为内容时，布局也会更改

基本上，我有一个。。。我从jQueryUI演示中获取，并希望使用html（）更改

…的内容

这是我的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>


这是用于显示信息的默认对话框。可以使用“x”图标移动、调整和关闭对话框窗口



BLO
BLU
BLL
BOO
CLA

手册下一页

这就是我要显示的“计划”对话框

我有两个按钮，如果我们点击OK，它将只显示当前对话框而不进行修改，重要的是“li”元素在两行上

像

BLO BLU BLL BOO 第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);;

});



好的，不好
$（'span.highlightOK'）。单击（函数（）{
setTimeout（function（）{$（“#dialog”）.dialog（）；}，100）；；
});
$（'span.highlightNOTOK'）。单击（函数（）{
$（“#suggestions0”）.html（BLO
BLO
BLO
BLO
BLO
BLO；
setTimeout（function（）{$（“#dialog”）.dialog（）；}，100）；；
});

我这里有一个现场演示
在动态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>");

$（“#suggestions0”）html（BLO
\nBLO
\nBLO
\nBLO
\nBLO
\n；

哦，天哪，真是太蠢了：）我会同意这个解决方案。仍然想知道为什么它不起作用。似乎这是一个html格式的问题。例如，如果你把
放进去，你会得到test2，但是如果你把
放进去，你会得到test2，可能有另一种方法可以用css来处理它，但这似乎是一个很容易的修复方法