【发布时间】:2012-07-04 14:54:34
【问题描述】:
可能重复:
Refresh a section after adding HTML dynamically to jquery mobile
我正在尝试在我的 jQueryMobile 页面中插入一个动态列表。
在我的主页中,我有一个名为“list”的 HTML ul 元素:<ul id='list' data-role='listview'>
</ul>
每个列表元素都包含一个网格 (class="ui-grid-a")。网格中的第一个 div,每个元素 (div class="ui-block-a") 包含一个 h2 描述,而第二个包含三个水平排列的按钮,在一个控件组 (div class="ui-block-b" data-role="controlgroup" data-type="horizontal")。
虽然元素在静态页面中时按钮呈现完美,但如果我尝试将它们动态插入页面中,它们会呈现不正确。下面是我的代码(jsfiddle here)。我错过了什么?
DOMElement += '<li>';
for (i = 0 ; i < length ; i++) {
if (typeof systemArray[i] !== 'undefined') {
DOMElement += '<fieldset class="ui-grid-a"> <div class="ui-block-a" style="width:60%;"> <h2 id="'
DOMElement += "system" + systemArray[i].name;
DOMElement += '">';
DOMElement += systemArray[i].name;
DOMElement += '</h2>';
DOMElement += '</div>';
DOMElement += '<div class="ui-block-b" data-role="controlgroup" data-type="horizontal" style="width:30%;">';
DOMElement += '<a href="#" class="deletebutton" data-icon="delete" data-role="button" id="';
DOMElement += 'delete|' + systemArray[i].name;
DOMElement += '" data-iconpos="notext">Cancel</a>';
DOMElement += '<a href="#" class="modifybutton" data-icon="gear" data-role="button" id="';
DOMElement += 'modify|' + systemArray[i].name;
DOMElement += '" data-iconpos="notext">Modify</a>';
DOMElement += '<a href="#" class="connectbutton" data-icon="arrow-r" data-role="button" id="';
DOMElement += 'connect|' + systemArray[i].name;
DOMElement += '" data-iconpos="notext">Connect</a>';
DOMElement += '</div>'
DOMElement += '</fieldset>';
}
}
DOMElement += '</li>';
// Needs trigger ('create') to create the icons http://jquerymobiledictionary.pl/faq.html
$("#list").html(DOMElement).trigger('create');
$("#list").listview("refresh");
【问题讨论】:
-
您缺少刷新方法,它用于将 jqm 样式应用于动态添加的元素。看这个:stackoverflow.com/questions/7160549/jquery-mobile-refresh-list 和这个:stackoverflow.com/questions/4821293/… 可能还有更多......
-
@Th0rndike - 我确实刷新了我的列表。您可以在我的代码底部看到
$("#list").listview("refresh")语句。 -
我看他们很好,唯一的问题是按钮自己堆叠。如果这是问题所在,您可以使用 css 解决它。小提琴:jsfiddle.net/fuWzX/5
-
这行得通,但我有两个问题:为什么当我动态地创建页面而不是使用静态 HTML 时会发生这种情况?如果我不希望 .ui-block-b 类中的每个地址都有该边距怎么办?
标签: jquery listview button jquery-mobile