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')调用的回调函数中调用.load()，以便在尝试初始化它们时实际存在要初始化的元素。

此外，您有时会遇到一个问题，即窗口小部件已初始化但后来您更改了它的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 :)
    });
});

jQuery Mobile样式用于异步包含的div

1 个答案: