Javascript 将左侧面板动态附加到所有页面

我是jQuery mobile的新手，正在使用jQuery mobile 1.4.3开发一个应用程序。我的问题是，我需要在所有页面中动态添加一个左侧面板，但我无法使其正常工作

该页面还需要在所有页面上有一个左侧标题按钮，以访问面板菜单

我失败的代码尝试：

一些示例代码：

$(document).on('pagecontainerbeforeshow', function (e, ui) {
    var activePage = $(ui.toPage),
        activePageId = activePage[0].id,
        myPanel = "",
        panelBtn = "";

    //does not work, but you get the ideia:
    myPanel = $('<div data-role="panel" id="mypanel" data-theme="a"><li><a href="#page1" data-role="button" data-theme="a">Btn page 1</a></li><li><a href="#page2" data-role="button" data-theme="a">Btn page 2</a></li></div>');
    activePage.append(myPanel);

    //how to add the panel Button to the Header so that it will show the left panel? some dummy code:

    panelBtn = $('<a href="#mypanel" data-role="button" data-icon="bars" data-iconpos="notext"></a>');
    activePage.append(panelBtn);

    switch (activePageId) {
        case 'page1':

            break;
        case 'page2':

            break;
        default:
    }

}).on("pagecontainerhide", function (e, ui) {
    var activePage = $(ui.toPage),
        activePageId = activePage[0].id;
});

尝试附加到$body

我假设pagecontainerbeforeshow是一个已定义的侦听器？

检查这个