0

我正在尝试动态更改对话框的内容，但是当我更改为内容时，布局会更改。

基本上，我有一个......我从 jquery-ui 演示中获取并想要更改

    ...
使用 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>

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

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

像

BLO BLU BLL BOO CLA XXX ....

但是当我动态更改内容时，“li”元素在一行上对齐，而不是 2 更多。

我试图弄清楚我做错了什么。

这里是点击的 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/

4

1 回答 1

0

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

$("#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/

于 2013-04-04T22:36:49.583 回答