jquery移动样式为异步包括div

Question

我正在开发一个使用jQuery Mobile库的移动网站。我有一个页眉，页脚和主页上的内容区域，任何环节都使用下面的代码加载到内容区域：

$("a").click(function() { 
var toLoad = $(this).attr('href'); 

// Loading image 
$('#content-body').html('<table class="loader"><tr><td><img src="<?php echo SITE_ROOT; ?>/img/ico/loader.gif" /></td></tr></table>'); 

$('#content-body').load(toLoad); 

这工作得很好，除了jQuery Mobile的样式不适用于这种方式包含的内容。例如，home页面包括按钮：

<a href="?Inventory" data-role="button">Inventory</a> 

但是，当我异步加载该页面添加到content DIV，该链接不以按钮形式显示。有没有什么办法可以告诉jQuery Mobile每次使用#content重新加载移动样式？

Answer 1

你当然可以。你想用.trigger('create')初始化任何jQuery Mobile的小工具：

$("a").click(function() { 
    var toLoad = $(this).attr('href'); 

    // Loading image 
    $('#content-body').html('<table class="loader"><tr><td><img src="<?php echo SITE_ROOT; ?>/img/ico/loader.gif" /></td></tr></table>'); 

    $('#content-body').load(toLoad, function() { 
     $(this).trigger('create');//it's that easy :) 
    }); 
}); 

请注意，您要初始化窗口小部件的父元素调用.trigger('create')。另请注意，由于您通过异步功能加载内容，因此您需要在调用​​调用的回调函数中调用.trigger('create')，以便在尝试初始化元素时实际存在初始化元素。

此外，您有时可能会遇到小部件已初始化的问题，但之后您更改了它的HTML并想要刷新小部件。有功能做到这一点，如：.listview('refresh')，.slider('refresh')等

我只是回答了有关需要进行初始化或刷新小窗口的问题：how to refresh jquery mobile listviews

而且你会想改变.click()到.delegate()如此通过AJAX加载的链接也会附加此事件处理程序：

$('#content-body').delegate('a', 'click', function() { 
    var toLoad = this.href;//no need to use jQuery here since `this.href` will be available in all major browsers 

    // Loading image 
    $('#content-body').html('<table class="loader"><tr><td><img src="<?php echo SITE_ROOT; ?>/img/ico/loader.gif" /></td></tr></table>'); 

    $('#content-body').load(toLoad, function() { 
     $(this).trigger('create');//it's that easy :) 
    }); 
});