更新DOM后jQuery Mobile丢失样式

时间:2012-06-12 19:50:31

标签: jquery-mobile

类似的问题已经发布了几次,但我找不到有效的解决方案。希望有人可以提供帮助!

我正在使用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 Documentation中,它说:

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

例如,如果通过Ajax加载了一个HTML标记块(比如登录表单),则触发create事件以自动将它包含的所有窗口小部件(在这种情况下为输入和按钮)转换为增强版本。此方案的代码为:

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

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

dirHeader.trigger("create");

这没有效果。所以我试着把它放在实际的追加上:

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

这没有效果。然后我在父元素上尝试了这个过程(在这种情况下,父div的id是&#34; levela&#34;)。所以我尝试了这个:

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

这也没有效果。此时,我完全迷失了。每个解决方案都涉及做我尝试过的事情之一,但是没有工作。我必须遗漏一些非常基本的东西,但我似乎无法找到它。

提前感谢您的帮助!

2 个答案:

答案 0 :(得分:2)

您可以致电.page

来更新内容

请参阅此working Fiddle示例!

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


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

答案 1 :(得分:0)

我刚刚解决了类似的问题 - 看来jQM页眉和页脚没有“创建”方法,所以据我所知,需要手动添加css类和角色。

作为参考,我在这个(旧)问题上发布了一个示例修复:JQuery Mobile trigger('create') command not working