Question

我正在为我的网站项目使用jquery mobile 1.3.2。

以下代码为所有页面创建一个面板：

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");

}

我该怎么做才能解决这个问题？

Answer 1

请注意，您对面板和 listview 使用相同的ID。建议不要这样做，但只要您在活动页面中指定要定位的元素，它仍然可以正常工作。

另外请注意，一旦您动态添加面板，就不需要调用任何增强方法，因为您将它们附加在pagebeforecreate上。它们将由jQM在该事件中创建/初始化。

$(document).on('pagebeforecreate', function () {
  if ($(this).find('[data-role=panel]').length === 0) {
    $('[data-role=header]').before(panel);
  }
});

要将元素附加到 listview ，您需要在活动页面中查找它。否则，新元素将添加到具有#history ID的第一个元素。

var listview = $.mobile.activePage.find("#history");
listview.append("elements").listview("refresh");

<强> Demo

添加动态列表项以使用列表视图动态创建面板

1 个答案: