类似的问题已发布多次,但我找不到有效的解决方案。希望有人能帮忙!
我正在使用 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 加载内容并将其注入(inject)页面,则可以触发 create 事件来处理新标记中包含的所有插件的自动初始化。这可以在任何元素(甚至页面 div 本身)上触发,从而节省您手动初始化每个插件( ListView 按钮、选择等)的任务。
例如,如果通过 Ajax 加载 HTML 标记 block (例如登录表单),则触发创建事件以自动将其包含的所有小部件(在本例中为输入和按钮)转换为增强版本。此场景的代码为:
$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
所以我尝试了几件事。在上面的代码之后,我添加了以下内容:
dirHeader.trigger("create");
这没有效果。所以我尝试将它放在实际的附加本身上:
dirHeader.append('<h1>' + folderName + '</h1>').trigger("create");
这没有效果。然后我在父元素上尝试了该过程(在本例中,父 div 的 id 是“levela”)。所以我尝试了这个:
$('#levela').trigger("create");
这也没有效果。此时,我完全迷失了。每个解决方案都涉及做我尝试过但不起作用的事情之一。我一定错过了一些非常基本的东西,但我似乎找不到它。
预先感谢您的帮助!
最佳答案
您可以通过调用.page
来更新内容:
查看此working Fiddle示例!
// Set the header
var title = 'super hyper BuBu',
$dirHeader = $('#hdr_levela');
$dirHeader.append('<h1>' + title+ '</h1>').page();
关于jquery-mobile - 更新 DOM 后 jQuery Mobile 失去风格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11003791/