jQuery 移动 ajax 未加载

Question

我必须在这里错过一件非常简单的事情，因为它看起来很明显......而且我不敢相信我在网上找不到任何东西！

我正在尝试使用 jQuery 移动库来制作我的网站的移动视图。

我的页面中有三个页面（数据角色）。两个带有静态内容，第二个带有我希望使用 ajax 加载的内容。主页有其他两个页面的链接：

<div data-role="page" id="home">
    <div data-role="header" id="header">
        <h1>the header</h1>
    </div>
    <div data-role="content">
        <a href="http://absolutepathtomyserver/homepage#highlights" data-role="button">highlights</a>
        <a href="http://absolutepathtomyserver/updatePlaylistTemplate#playlist" data-role="button" rel="external">playlist</a>
    </div>
</div>

<div data-role="page" id="highlights">
    <div data-role="content">
        <p class="center">My static content</p>
    </div>
</div>

<div data-role="page" id="playlist">
    <div data-role="content"><!-- TO BE FILLED FROM AJAX! --></div>
</div>

根据我对阅读的许多教程的理解，默认情况下，所有 a href 链接都会执行 ajax 调用，除非另有说明，但它不起作用。当我单击突出显示链接时，该页面就像预期的那样滑动，而没有加载任何其他页面，因为它是同一页面。这里一切都很好。但是当我单击播放列表页面时，会执行幻灯片动画，但不会进行 ajax 调用，因此永远不会填充播放列表的内容。请注意，我监控网络调用，但单击链接时没有进行任何调用。

我错过了什么？

这是我的绝对使命吗？我将标签基 URL 用于静态内容，因此链接在我的所有应用程序中都必须是绝对的。

我需要使用 .bind 方法吗？

我需要手动进行 ajax 调用吗？我可以做到，但是从我的阅读来看，它似乎是移动扩展中的 href 链接的原生...

Answer 1

jQuery Mobile ajax-link 处理适用于文档中尚未指定的伪页面。如果您想通过 home 伪页面上的链接进行 ajax 加载页面，则从文档中省略 playlist 伪页面。 jQuery Mobile 会跳转到链接中指定的 url，抓取data-role="page" 元素内的所有内容，自动添加到 dom 中，并跳转到新添加的页面。

另一种方法是在playlist页面显示如下时通过ajax调用加载数据：

$('#playlist').bind('pageshow', function () {
    $.get('url_to/get.php', function (data) {
        $('#playlist').find('[data-role="content"]').html(data);
    });
});

上述示例每次显示时都会重新加载playlist 伪页面内的data-role="content" 元素中的html。您也可以使用pagecreate 或其他jQuery Mobile events 之一。

Answer 2

选项 2 稍加调整。我不知道为什么，但实际上，代码中的回调函数似乎太快了，因为没有填充内容，尽管内容是从后端获取的。我可以在我的网络检查器中看到呼叫。第二个选择器中也缺少“ ' ”。

这是工作代码：

$('#playlist').bind('pageshow', function () {
    $.ajax({
        url: 'updateplaylist.html',
        success:function(data, textStatus, jqXHR){$('#playlist').find('[data-role="content"]').html(data);}
    }); 
});

我仍然想知道为什么选项 1 没有采用正确的 url。我还担心手动执行我的 ajax 调用会跳过 jquery 移动框架的默认微调器。本地太快了，反正我也看不到。