jquery-mobile - jQuery 移动版 1.0 : how to enhance page more than one time

Question

jQuery 移动版 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

Enhancing new markup
The page plugin dispatches a pagecreate event, which most widgets use to auto-initialize themselves. As long as a widget plugin script is referenced, it will automatically enhance any instances of the widgets it finds on the page.

However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).

For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the create event to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:

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

Create vs. refresh: An important distinction
Note that there is an important difference between the create event and refresh method that some widgets have. The create event is suited for enhancing raw markup that contains one or more widgets. The refresh method should be used on existing (already enhanced) widgets that have been manipulated programmatically and need the UI be updated to match.

For example, if you had a page where you dynamically appended a new unordered list with data-role=listview attribute after page creation, triggering create on a parent element of that list would transform it into a listview styled widget. If more list items were then programmatically added, calling the listview’s refresh method would update just those new list items to the enhanced state and leave the existing list items untouched.

更新:

你能试试这个吗

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