Question

我不想在我的HTML中构建页面，而是想用javascript构建，但我无法弄清楚如何做。所以，我尝试使用.trigger("create")，但事实并非如此，因为他不断创建许多页面。我做的另一种方式是append，它有效，但不是我想要的方式，因为不给我Widget。但是，它应该渲染，对吗？或者有更好的方法吗？

HTML

<div data-role="page" id="page1">
<div data-role="button" onclick="goToMenu()">Next</div>
</div>
<div data-role="page" id="page2">   
</div>

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

Answer 1

你必须将你的代码重组一点点。

不建议在data-role="button"上使用div。在a或button标记上使用。
您必须在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");
    });
});

这是一个演示：http://jsfiddle.net/hungerpain/3uybD/

JQM在Javascript中构建页面

1 个答案: