JQM在Javascript中构建页面

我不想用HTML构建页面，而是想用javascript构建页面，但我不知道该怎么做。因此，我尝试使用

.trigger（“create”）

，但事实并非如此，因为他一直在创建许多页面。我做的另一个方法是

附加
，它可以工作，但不是我想要的方式，因为它没有给我小部件。但是，它应该呈现，对吗？还是有更好的办法

Html


下一个

Javascript

var menu = '<div data-theme="a" data-role="header"> \n' +
'<a data-role="button" onclick="" class="ui-btn-left">Back</a> \n' +
'<h3> Header</h3> \n' +
'</div> \n' +
'<div data-role="content"> \n' +
'</div> \n' +
'</div>';

function goToMenu() {
    $.mobile.changePage("#page2", {
        transition: "flow"
    });
    $('#page2').append(menu);
}

var菜单='\n'+
'返回\n'+
'标题\n'+
“\n”+
“\n”+
“\n”+
'';
函数goToMenu（）{
$.mobile.changePage（#第2页）{
过渡：“流动”
});
$（'#第2页'）。附加（菜单）；
}
您必须稍微重新构造代码

不建议在
div
上使用
data role=“button”
。在
a
或
按钮上使用它

您必须将动态生成页面的所有代码放入
goToMenu
函数中。附加它，然后使用
changePage
不建议使用
onclick
。使用事件委托的jQuery方式
以下是标记：

<div data-role="page" id="page1">
    <div data-role="content">
        <button id="nextPageLink">Next</button>
    </div>
</div>
<div data-role="page" id="page2"></div>


下一个

下面是JavaScript：

//pageinit event of page1
$(document).on("pageinit", "#page1", function () {
    //click event for button
    $(this).on("click", "button", function () {
        //create HTML
        var menu = '<div data-theme="a" data-role="header">' +
            '<a data-role="button" data-rel="back" class="ui-btn-left">Back</a> ' +
            '<h3> Header</h3>' +
            '</div>' +
            '<div data-role="content">' +
            '</div>' +
            '</div>';
        //append "menu" to #page2
        $(menu).appendTo("#page2");
        //changePage to redirect to #page2
        $.mobile.changePage("#page2");
    });
});

//第1页的pageinit事件
$（document）.on（“pageinit”、“#page1”，函数（）{
//点击事件按钮
$（此）。在（“单击”、“按钮”上，函数（）{
//创建HTML
变量菜单=“”+
"

//pageinit event of page1
$(document).on("pageinit", "#page1", function () {
    //click event for button
    $(this).on("click", "button", function () {
        //create HTML
        var menu = '<div data-theme="a" data-role="header">' +
            '<a data-role="button" data-rel="back" class="ui-btn-left">Back</a> ' +
            '<h3> Header</h3>' +
            '</div>' +
            '<div data-role="content">' +
            '</div>' +
            '</div>';
        //append "menu" to #page2
        $(menu).appendTo("#page2");
        //changePage to redirect to #page2
        $.mobile.changePage("#page2");
    });
});