1

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

4

1 回答 1

3

由于 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 解析。

于 2012-10-05T16:06:12.023 回答