JQM重复标签

Question

我正在尝试将所有data-role=header页面附加到左侧的图标菜单，但它在右侧是重复的，有人可以给我一个解释吗？ html()有效，但标题没有使用图标调整大小。

var header = '<a href="#left-panel" id="panel-left" data-icon="carat-r" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-btn ui-shadow ui-corner-all ui-icon-bullets ui-btn-icon-notext ui-btn-inline"></a>';

更新的代码：标题中的按钮丢失。

$(document).one('pagebeforecreate', function () {
    $.mobile.pageContainer.prepend(panel);
    $("[data-role=panel]").enhanceWithin();
    $("#left-panel").panel();
    /* search for button and header in active page only*/
    var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
    if( $("#panel-left", activePage).length === 0 ) {
    $("[data-role=header]", activePage).append(header);
    }
});

Answer 1

更新

由于您正在使用单页模型和数据预取外部链接，getActivePage将返回DOM中的第一页。因此， activePage 应该是正在创建的页面。将以下代码置于您正在使用的代码之外，以动态附加外部面板。

$(document).on('pagebeforecreate', function (e) {
  var activePage = $(e.target);
    if ($("#panel-left", activePage).length === 0) {
        $("[data-role=header]", activePage).append(header);
    }
});

---

您需要首先检查按钮是否已经附加，因为pagebeforecreate会在每个正在创建的页面上触发。

更新

在pagecreate上，检查当前页面是否在标题中没有按钮并附加它。

var header = '<a href="#left-panel" id="panel-left" data-icon="carat-r" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-btn ui-shadow ui-corner-all ui-icon-bullets ui-btn-icon-notext ui-btn-inline"></a>';

$(document).one('pagebeforecreate', function () {
    /* append External panel once */
    $.mobile.pageContainer.prepend(panel);
    $("#left-panel").panel();
    /* append button on pagecreate */
    $(document).on('pagecreate', function () {
        var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
        if ($("#panel-left", activePage).length === 0) {
            $("[data-role=header]", activePage).append(header);
        }
    });
});

  

<强> Demo

Answer 2

我认为您的代码在每个header事件上向每个[data-role=header]添加pagebeforecreate，因此可能是重复代码。试试这个：

$(document).one('pagebeforecreate', function () {
    $(this).find("[data-role=header]").append(header);
});