Question

现在，我的问题是“简单”（问题是，解决方案可能不是）。我有一个使用$ .json（）检索数据的函数。必须使用从'pageinit'/'pageshow'调用的函数将数据加载到<ul>。虽然它根本不加载任何东西。但！当我刷新页面时，它会完全加载pageinit而没有问题。

这是我的jQuery;

$('#showsPage').bind('pageshow', function(event) {
    getShows();
});

/******* FUNCTIONS *********/
function getShows()
{
    // Loading.
    $.mobile.loading('show');

    // Load the data.
    $.getJSON("some url", function(json) {

        $("#listShows li").remove();

        $.each(json.data, function(index, show) {

            $("#listShows").append("<li><a href='#'>Stuff</a></li>");
            $("#listShows").listview('refresh');

            // Hide the loading.
            $.mobile.loading('hide');

        });
    });
}

我做错了什么吗？我有一个pageinit在不同的页面上运行没有问题。

Answer 1

由于jQuery Mobile的AJAX处理页面转换，您应该在绑定到页面事件时委派事件绑定，例如pageinit或pageshow。

以下是一个例子：

$(document).on('pageshow', '#showsPage', getShows);

这将确保在#showsPage元素实际位于DOM中之前不会发生绑定。

请注意，如果您没有传入任何参数，则不需要匿名函数。在不传递任何参数的情况下，您可以将函数的名称作为回调传递给.on()方法。

请注意，只要用户刷新页面或深入链接到您的站点，就需要绑定此委派事件处理程序，因此我建议将其放在外部脚本中，并在每个文档的<head>中包含该脚本（就在结束</body>标记之前，只是不在data-role="page"元素内部），以便任何页面刷新都不会破坏您网站上的功能。另一种方法是将特定页面的代码放在data-role="page"元素中，这样当它通过AJAX进入DOM时，您的代码将由jQuery Mobile解析。

jQuery Mobile没有激活pageinit

1 个答案: