更新

Question

jQuery mobile 1.0

我改变了网页的内容，简单来说就是：

//$page - is enhanced page.
$page.html('<div data-role="header">New Header</div>');
// I what it to be enhanced but $page.page(), $page.trigger('create'), $page.trigger('refresh') is not working

根据文档'page（）'使用过一次，第二次被忽略。那么动态添加后增强页面元素的方法是什么？

我知道如何增强“listview”，但其他元素呢？

Answer 1

尝试

$('#pageId').trigger('create');

文档：

http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html

增强新标记
  页面插件调度pagecreate事件，大多数窗口小部件都使用它来自动初始化自己。只要   当引用widget插件脚本时，它会自动增强   它在页面上找到的小部件的任何实例。

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

例如，如果加载了一个HTML标记块（比如一个登录表单）   通过Ajax，触发create事件自动转换   它包含的所有小部件（在这种情况下为输入和按钮）   增强版本。此方案的代码为：
$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
创建与刷新： 重要区别
请注意，create事件和刷新方法之间存在重要差异   一些小部件有。 create事件适合增强原始   包含一个或多个小部件的标记。刷新方法应该是   用于已经被操纵的现有（已经增强的）小部件   以编程方式，需要更新UI以匹配。

例如，如果您有一个动态添加新页面的页面   页面后面带有data-role=listview属性的无序列表   创建，触发该列表的父元素上的创建   将其转换为listview样式的小部件。如果有更多列表项   然后以编程方式添加，调用listview的refresh方法   会将这些新列表项更新为增强状态并离开   现有的列表项目未受影响。

更新：

你能试试吗

$page.html('<div data-role="header">New Header</div>');
$("div:jqmData(role='header')").trigger('create');

Answer 2

通常在初始化（增强）页面一次时，然后刷新它而不是尝试再次初始化它。

我没有尝试过立刻增强整个页面，我通常会调用每个小部件的刷新方法：

$('#my-listview-id').listview('refresh');

所以也许你也可以为page()函数做到这一点：

$('#my-page-id').page('refresh');

更新

我在动态创建页面（http://jquerymobile.com/demos/1.0/docs/pages/page-dynamic.html）的文档中找到了这个：

    // Pages are lazily enhanced. We call page() on the page
    // element to make sure it is always enhanced before we
    // attempt to enhance the listview markup we just injected.
    // Subsequent calls to page() are ignored since a page/widget
    // can only be enhanced once.

更新

所以你在那里做的是覆盖所有jQuery Mobile样式，但你不必这样做。使用您的开发人员工具，检查已初始化的标题窗口小部件（或您可能想要更新的任何窗口小部件）的HTML结构。 HTML的结构将有所不同，您将能够定位某些元素以更新诸如文本，图标，阴影等内容。

以下是初始化后的jQuery Mobile Header小部件示例：

<div data-role="header" data-theme="f" class="ui-header ui-bar-f" role="banner">
    <h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Content formatting</h1>
    <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home ui-btn ui-btn-up-f ui-btn-icon-notext ui-btn-corner-all ui-shadow" title="Home" data-theme="f">
        <span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
            <span class="ui-btn-text">Home</span>
            <span class="ui-icon ui-icon-home ui-icon-shadow"></span>
        </span>
    </a>
</div>

请注意，如果您要更新按钮的图标或文本，可以在Button小部件中定位.ui-icon或.ui-btn-text：$('.ui-header').children('.ui-btn').find('.ui-text').text('my new button text')。

Answer 3

经过一段时间的努力，我终于找到了一种方法来欺骗jQuery Mobile重新增强：

$('#your-page').data({mobilePage: null}).page();

你不会在任何地方的文档中找到它，但是他们通过jQuery的mobilePage检查附加到元素的.data()，看看它是否已被增强。

我不知道这是否会产生副作用。它不适合我，但我使用骨干进行路由。您可以先尝试存储mobilePage的值，然后再使用hack，然后再设置mobilePage。

我要使用的另一个选项是found here：

$('#your-page').trigger('pagecreate');

有人评论说会导致后退按钮中断。

如果您只更新页面的内容部分，则$('#your-page').trigger('create');将有效。

jQuery mobile 1.0：如何多次增强页面

3 个答案:

更新

更新