更新 DOM 后 jQuery Mobile 失去风格答案

【问题标题】：jQuery Mobile Losing Style After Updating DOM更新 DOM 后 jQuery Mobile 失去风格
【发布时间】：2012-06-12 19:50:30
【问题描述】：

类似的问题已多次发布，但我找不到有效的解决方案。希望有人可以提供帮助！

我正在使用 jQuery Mobile 1.1 和 jQuery 1.7.2，所以我使用的是最新的稳定版本。我想创建一个动态页眉。使用此 HTML 代码，它可以正常工作：

    <div data-role="page" id="levela">
     <div data-role="header" id="hdr_levela">
    <h1>Title</h1>
     </div>
</div>

然后我去动态创建标题。我将 HTML 更改为：

    <div data-role="page" id="levela">
     <div data-role="header" id="hdr_levela">
     </div>
</div>

并添加以下jQuery代码：

    // Set the header
var dirHeader = $('#hdr_levela');
dirHeader.append('<h1>' + title+ '</h1>');

标题出现，但没有样式。我找到了几个关于这个的帖子。在 jQuery Mobile 文档中，它说：

“但是，如果您在客户端生成新的标记或通过 Ajax 加载内容并将其注入页面，则可以触发 create 事件来处理新标记中包含的所有插件的自动初始化。这可以在任何元素（甚至是页面 div 本身）上触发，省去了手动初始化每个插件（listview 按钮、选择等）的任务。

例如，如果通过 Ajax 加载了 HTML 标记块（例如登录表单），则触发 create 事件以自动将其包含的所有小部件（在本例中为输入和按钮）转换为增强版本。这个场景的代码是：

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

所以我尝试了几件事。在上面的代码之后，我添加了以下内容：

dirHeader.trigger("create");

这没有效果。所以我试着把它放在实际的 append 本身上：

dirHeader.append('<h1>' + folderName + '</h1>').trigger("create");

这没有效果。然后我在父元素上尝试了这个过程（在这种情况下，父 div 的 id 是“levela”）。所以我尝试了这个：

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

这也没有效果。在这一点上，我完全迷失了。每个解决方案都涉及做我尝试过但不起作用的事情之一。我一定错过了一些非常基本的东西，但我似乎找不到它。

提前感谢您的帮助！

【问题讨论】：

【解决方案1】：

您可以拨打.page更新内容：

查看此working Fiddle 示例！

// Set the header
var title      = 'super hyper BuBu',
    $dirHeader = $('#hdr_levela');


$dirHeader.append('<h1>' + title+ '</h1>').page();

【讨论】：

谢谢！但解决方案更深一些。您的解决方案在小提琴示例中完美运行，但对我不起作用。我挖得更深一点，发现 Fiddle 示例不是使用 jQuery Mobile 1.1，而是使用 1.0 构建。这就是诀窍—— page() 似乎不适用于 1.1。当我降级 jQuery Mobile 时，它运行良好。谢谢你的帮助！！
是的，无法使 Fiddle 与您的 jQuery Mobile 版本一起使用，假设存在 jsFiddle 问题...所以为了准备一个示例，我使用了早期版本！很高兴最终这解决了你的问题:)

【解决方案2】：

我刚刚解决了一个类似的问题——jQM页眉和页脚似乎没有“create”方法，据我所知，css类和角色需要手动添加。

作为参考，我针对这个（旧）问题发布了一个示例修复：JQuery Mobile trigger('create') command not working

【讨论】：