使用 istview 将动态列表项添加到动态创建的面板

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

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

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

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

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

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

Demo