在jQuery Mobile中的AJAX请求之后刷新页面

Question

我在index.html上有以下jQueryMobile页面解剖:

<div data-role="page"> 
    <div data-role="header">...</div> 
    <div data-role="content">...</div> 
    <div data-role="footer">...</div> 
</div> 

我有兴趣data-role="content"通过AJAX 加载其他页面(没有这个解剖结构),以便在所有页面中使用相同的页眉和页脚.

代码bellow工作正常但不会刷新jQueryMobile样式的元素.

$( 'div:jqmData(role="content")' ).load( 'pages/home.html' );

Answer 1

您需要做的就是告诉jQuery Framework初始化新的小部件:

$( '.ui-content' ).load( 'pages/home.html', function () { $(this).trigger('create') });

此外,如果你想要的只是一个持久的页眉/页脚,那么你应该检查jQuery Mobile的那个功能:http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/footer-坚持-b.html

这是一个演示:http://jsfiddle.net/VMhz4/1/

更新

data-role="button"如果需要,您可以动态添加到此类链接:

$( '.ui-content' ).load( 'pages/home.html', function () {

    //after the AJAX request has resolved and the HTML has been added to the DOM, this will run

    //find all the links that were just added to the DOM and add the `data-role="button"` attribute to each,
    //then end the current selection (returning to `$(this)`) and initialize all widgets
    $(this).find('a').attr('data-role', 'button').end().trigger('create');
});