jQuery Mobile样式用于异步包含的div [英] jQuery Mobile styles for an asynchronously included div

问题描述

我正在使用jQuery Mobile图书馆开发移动网站。我在主页上有一个标题，一个页脚和一个内容区域，并使用以下代码将任何链接加载到内容区域：

I'm developing a mobile website using the jQuery Mobile library. I have a header, a footer and a content area on the main page, and any links are loaded into the content area using the following code:

$("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 页面包括按钮：

This works fine, except that the jQuery Mobile styles don't apply to content included this way. For example, the home page includes buttons:

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

当我将页面异步加载到 content div时，链接不会显示为按钮。有任何方法告诉jQuery Mobile每次应用移动样式 #content 是否重新加载？

But when I load that page asynchronously into the content div, the links do not appear as buttons. Is there any way to tell jQuery Mobile to apply the mobile styles every-time #content is reloaded?

推荐答案

当然可以。您要使用 .trigger（'create'）初始化任何jQuery Mobile小部件：

You sure can. You want to use .trigger('create') to initialize any jQuery Mobile widget:

$("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（）调用，以便初始化的元素实际上存在。

Note that you call .trigger('create') on the parent element of the widget you want to initialize. Also note that since you are loading content through an asynchronous function you will need to call .trigger('create') in the callback function for your .load() call so that the elements to initialize are actually present when you try to initialize them.

其中窗口小部件已初始化，但后来您更改了它的HTML，并希望刷新小部件。有一些函数可以这样做： .listview（'refresh'）， .slider（'refresh'）等等。

Also you can sometimes run into an issue where the widget has been initialized but then you changed it's HTML and want to refresh the widget instead. There are functions to do this such as: .listview('refresh'), .slider('refresh'), etc.

我刚刚回答了一个关于需要初始化或刷新的窗口小部件的问题：如何刷新jQuery移动列表视图

I just answered a question regarding widgets needing to be initialized or refreshed: how to refresh jquery mobile listviews

此外，您将要更改 .click（）到 .delegate（），所以通过AJAX加载的链接也会附加这个事件处理程序：

Also you will want to change that .click() to a .delegate() so the links that are loaded via AJAX will also have this event handler attached:

$('#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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！