Jquery mobile 为什么动态添加的内容不能用jQuery Mobile呈现？

我使用的是jquerymobile+Backbone+RequireJS。成功登录后，我将执行以下操作：

require(['app/view/main'], function(MainView) {
  var mainView = new MainView();
  $('body').html(mainView.render().el);
});

render（）看起来像

render: function() {
  this.$el.html(this.template);
  return this;
}

这样做时，我的页面是空白的。检查主体时，我确实在主体内部看到以下HTML：

<div data-role="page" id="main">
  <div data-role="header" data-position="inline">
      <h1>Accounts</h1>
  </div>
  <div data-role="content">
    hello
  </div>
</div>

以及

this.$el.html(this.template).page();

但是这一页还是空白的。你知道为什么吗

---

如果我只是将HTML放在正文中并加载页面，它会显示得很好，就像普通的jQuery移动应用程序一样。

您是否在pageinit之后才触发/创建页面

$(document).bind('pageinit', function() {
    // trigger
});

---

此外，jQM可能将您的标记解释为一个单页模板，然后通过注入

datarole='page'

元素，您正在标记一个多页文档（只有一页）。尝试将

元素保留在默认标记中，然后动态添加页眉、内容和页脚。然后jQM应该正确地解释标记并相应地增强它。

好吧，如果我在pageinit中包装$（'body'）.html（mainView.render（）.el），那么什么都不会发生。我在页面加载后很好地呈现MainView。页面加载和jQuery Mobile pageinit是两个完全不同的事件。您可以随时呈现模板，但在pageinit之后才能动态添加内容。老实说，我不知道jQM对空DOM做了什么。它可能将其视为单页模板，然后通过注入

data role='page'

元素，创建了一个多页文档（只有一页）。尝试将

元素保留在默认标记中，只动态添加页眉、内容和页脚。将

保留在适当的位置就可以了。如果您想编辑您的答案以包含此内容，我会将其标记为答案。

$(document).bind('pageinit', function() {
    // trigger
});