我正在将jquery mobile 1.3.2用于我的Web项目。
以下代码为所有页面创建一个面板：
function injectPanelIntoAllPages(){
console.log("IncetPanel");
var panel = '<div data-role="panel" id="mypanel" data-position="left" data-display="push">' +
'<div><ul data-role="listview" id="history"></ul></div> </div>';
$(document).on('pagebeforecreate', '[data-role=page]', function () {
if ($(this).find('[data-role=panel]').length === 0) {
$('[data-role=header]').before(panel);
}
$(document).on('pagebeforeshow', '[data-role=page]', function () {
$(this).trigger('pagecreate');
});
});
}
现在，我想向面板中的列表视图添加（动态）列表项，但是它不起作用。
为了添加列表项，我使用以下方法：
function addToHistory(value) {
$("#history").append(
"<li id='history-element'>" + value + "</li>");
$("#history").listview("refresh");
}
我该怎么做才能解决这个问题？
请注意，您为panel和listview使用的ID相同。不建议这样做，但是只要您指定要在活动页面内定位的元素，它就仍然可以使用。
另外请注意，动态添加面板后，您无需调用任何增强方法，因为您可以将面板添加到上pagebeforecreate。它们将由jQM在该事件上创建/初始化。
$(document).on('pagebeforecreate', function () {
if ($(this).find('[data-role=panel]').length === 0) {
$('[data-role=header]').before(panel);
}
});
要将元素追加到listview中，您需要在活动页面中查找它。否则，新元素将添加到具有#historyID的第一个元素中。
var listview = $.mobile.activePage.find("#history");
listview.append("elements").listview("refresh");
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句