1

我在列表视图中动态生成列表项（onclick）。你可以在这里查看我的代码： jsfiddle

由于我必须在 jsfiddle 链接中附上代码，所以这里是：

HTML

<div data-role="fieldcontain">Select option:
    <br>
    <select name="prodselect" id="prodselect">
        <option data-foo="xxx">first</option>
        <option data-foo="yyy" selected="selected">Second</option>
    </select>
    <input type="button" name="appeprod" id="appeprod" value="Add option" data-icon="add" data-inline="true" />
</div>
<ul name="listaproduse" id="listaproduse" data-role="listview" data-theme="c" data-divider-theme="e" data-count-theme="b" data-inset="true">
    <li data-role="list-divider">
         <h3 class="ui-li-heading">Selected options</h3>
 <span class="ui-li-count">5</span> 
    </li>
    <li id="produsele" name="produsele"></li>
</ul>

和脚本

$('#appeprod').click(function() {
    var option = $('#prodselect').val();
    var box = document.getElementById('prodselect');
    var option2 = box.options[box.selectedIndex].text;
    $('#listaproduse').append('<li><h3>'+option2+'<h3><p>'+option+'</p><p>Some comment:</p></li>');
    $('#listaproduse').listview("refresh");
});

我的问题是（正如您在 jsfiddle 中看到的那样）H3 标签内容与下面的段落重叠。

我更新了 jsfiddle ，添加到动态列表视图下方，这是一个静态列表，其内容与我希望在动态列表中生成的内容相同。静态的看起来不错，而动态的则重叠。我能做些什么？我怎样才能避免这种情况？

4

2 回答 2

2

您没有<h3>在 JS 代码中正确关闭。应该：<h3>'+option2+'</h3>

于 2013-07-10T23:30:04.073 回答
0

您需要将此添加到样式中。我查看了添加到该元素的样式，发现 margin-top 为 -0.5em

CSS

.ui-li-desc
{
 margin-top: 0;
}
于 2013-07-10T23:37:28.877 回答