0

我不想在我的 HTML 中构建页面，而是在 javascript 中构建，但我不知道该怎么做。因此，我尝试使用.trigger("create")，但事实并非如此，因为他不断创建许多页面。我做的另一种方式是append，它可以工作，但不是我想要的方式，因为没有给我小部件。但是，它应该渲染，对吧？还是有更好的办法？

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

1 回答 1

0

您将不得不稍微重构您的代码。

  1. 不建议data-role="button"在div. a在标签上或标签上使用它button。
  2. 您必须将用于动态生成页面的所有代码放入goToMenu函数中。附加它，然后使用changePage.
  3. 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/

于 2013-08-05T02:51:29.713 回答