更新

Question

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

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

我有兴趣通过AJAX将其他页面（没有这个解剖结构）加载到data-role="content"，以便在所有页面中使用相同的页眉和页脚。

下面的代码工作正常，但不会使用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-persist-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');
});

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

1 个答案:

更新