JQuery Mobile 动态添加的页面没有主题答案

【问题标题】：JQuery Mobile dynamically added pages are unthemedJQuery Mobile 动态添加的页面没有主题
【发布时间】：2013-10-31 11:32:38
【问题描述】：

我目前正在尝试从 JSON 文件动态生成页面。我可以生成页面，但是当我之后访问该页面时，该页面没有主题，除了后退按钮。这是我生成页面的代码：

function generateClassPage(dept, cNumber) {
    $("body").append('<div data-role="page" data-control-title="' + majorArray[dept] + ' ' + cNumber + '" id=' + dept + 'p' + cNumber + '>');
    $('#' + dept + 'p' + cNumber).append('<div data-theme="b" data-role="header"><a data-role="button" data-inline="true" data-direction="reverse" data-rel="back" data-transition="slidedown" data-theme="e" href="#page2" data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">Back</a>');
    $('#' + dept + 'p' + cNumber).append('<h3>' + majorArray[parseInt(dept)] + ' ' + cNumber + '</h3>');
    $('#' + dept + 'p' + cNumber).append('</div><div data-role="content">');

    $('#' + dept + 'p' + cNumber).append('<h3>' + pageParameterArray.name + '</h3>');
    $('#' + dept + 'p' + cNumber).append('<div data-controltype="textblock"><p><span><strong>Units</strong>: ' + pageParameterArray.units + '</span></p>');

    $('#' + dept + 'p' + cNumber).append('<p><span><strong>Pre-Requisites</strong>:&nbsp;</span></p>');
    $('#' + dept + 'p' + cNumber).append('<ul>');

    alert(pageParameterArray.prerequisites.length);

    if (pageParameterArray.prerequisites.length > 0) {
        for (var i = 0; i < pageParameterArray.prerequisites.length; i++) {
            $.ajax({
                url: 'http://majors.uclastudentmedia.com/classes/',
                type: 'GET',
                crossDomain: true,
                data: {
                    pk: pageParameterArray.prerequisites[i]
                },
                dataType: 'json',
                success: function (json_3) {
                    alert("JSON Length = " + json_3.length);
                    $('#' + dept + 'p' + cNumber).append('<li><span>' + majorArray[parseInt(json_3[0]['fields']['department'])] + ' ' + json_3[0]['fields']['class_number'] + '</span></li>');
                }
            });
        }
    }    

    $('#' + dept + 'p' + cNumber).append('<li><span>n/a</span></li>');
    $('#' + dept + 'p' + cNumber).append('</ul>');

    $('#' + dept + 'p' + cNumber).append('</div></p></div></div></div>');
    alert("Page created!");
    $('#' + dept + 'p' + cNumber).page();
}

之后检查 HTML 页面时，div 已正确添加并且可以访问，但它缺少所有 JQuery 移动主题元素。我需要做些什么来刷新主题吗？谢谢！

【问题讨论】：

尝试.trigger('pagecreate') 而不是.page()。何时/如何注入新页面？点击或触发事件时？
感谢您的回复！我有一个绑定到点击事件的按钮，它启动另一个函数，最终启动这个函数。
我猜页面应该附加到页面容器中。试试$.mobile.pageContainer.append() 或pagecontainer，小写字母C。
还是没有。还有其他更有效的方法来创建新页面吗？
如果你是firebug，你能看到DOM增强的页面吗？

标签： javascript jquery html jquery-mobile

【解决方案1】：

是的，您必须在 HTML 到位后触发 create 事件。像这样的东西应该可以解决问题：

$(document).trigger('create');

请注意，这需要在所有 HTML 创建后运行，否则将无法正常工作。

【讨论】：

感谢您的回复。我在附加所有 HTML 后使用该命令，但页面仍然没有主题
@user2884505 可能是调用该方法时还没有完成HTML渲染。尝试从浏览器控制台运行命令。
我在控制台中尝试了 trigger('create') 和 trigger('pagecreate') ，但似乎都不起作用。

【解决方案2】：

您是否尝试过为要附加的页面 div 分配一个 id 属性然后这样做：

$("#pageid").trigger('create');

使用您分配的 id 代替 #pageid 直接在该 div 上

【讨论】：

是的，我试过了，没有运气。只是检查一下，我应该将所有页面元素附加到页面 div 而不是正文，对吗？
这行好像多了一个
：$('#' + dept + 'p' + cNumber).append('