jQuery mobile：重新加载内容后应用样式

Question

首先，我对 jQuery 和 JavaScript 非常陌生，但对 HTML 和 PHP 不熟悉。

我发现了很多关于这个问题的帖子，但没有解决方案。我想我做错了什么（完全？）...

我有两个文件，index.php 和 content.php，它们应该动态地向页面添加内容。

index.php:

<!DOCTYPE html>
<html>
<head xmlns="http://www.w3.org/1999/xhtml">
    <meta charset="UTF-8"></meta>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link type="text/css" rel="stylesheet" href="../css/jquery.mobile-1.1.1.min.css"></link>
    <script type="text/javascript" src="../js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../js/jquery.mobile-1.1.1.min.js"></script>
    <title>Ajax test</title>

    <script language="JavaScript">

    $(function(){
        $('#page1').click(function(event) {        
            $('#content').load($(this).attr('href')).trigger("create");
            return false;
        });
    });


    $(function(){
        $('#page2').click(function(event) {        
            $('#content').load($(this).attr('href')).trigger("create");
            return false;
        });
    }); 

    </script>

</head>

<body>
    <div id="hm-agenda" data-theme="a" data-role="page">

        <div data-theme="a" data-role="header">
            <h1>Ajax test</h1>
        </div>

        <div id="content" data-role="content">
            Default content
        </div>

    <div data-theme="a" data-role="footer" data-position="fixed" class="nav-glyphish-example">
        <div data-role="navbar" class="nav-glyphish-example" data-grid="d" class="navdiv">
        <ul>
            <li><a href="content.php?page=1" id="page1">Page 1</a></li>
            <li><a href="content.php?page=2" id="page2">Page 2</a></li>
            <li><a href="content.php?page=3" id="page3">Page 3</a></li>
            <li><a href="content.php?page=4" id="page4">Page 4</a></li>
            <li><a href="content.php?page=5" id="page5">Page 5</a></li>
        </ul>
        </div>
    </div>

</body>
</html>

因此，在导航中单击“第 1 页”或“第 2 页”应该会将 content.php?page=x 加载到 id 为“content”的 div 中。

这就是 content.php 的样子：

<ul data-role="listview" class="hm-list">
<li data-role="list-divider"><h3>You are on page: <?php print $_GET['page']; ?></h3></li>
</ul>

将文件加载到 content-div 中可以正常工作，因为 jQuery 不会应用样式。 奇怪的是，点击导航中的链接后，样式会被应用大约一秒钟，然后立即消失。

此示例在线：http://m.sepulturagenda.ch/ajax/

感谢任何帮助。我现在在这里存了几个小时......

Answer 1

你的问题在于这一行：

$('#content').load($(this).attr('href')).trigger("create");

您正在通过.load() 创建一个异步请求，并且在调用.trigger("create") 方法之前没有等待它完成。所以基本上你在初始化任何 HTML 之前调用 .trigger("create") 方法。

您可以利用可以传递给.load() 的回调函数在正确的时间调用.trigger("create") 方法。

例如：

$(function(){
    $('#page1').click(function(event) {        
        $('#content').load($(this).attr('href'), function () {
            $('#content').trigger("create");
        }).trigger("create");
        return false;
    });
});

速记：

您使用.load() 加载外部内容有什么原因吗？只要外部内容的格式正确，jQuery Mobile 就会为您执行此操作。这里有一些文档来解释我的意思：http://jquerymobile.com/demos/1.1.1/docs/pages/page-links.html

附注：

在使用 jQuery Mobile 时不推荐使用 document.ready 事件处理程序。相反，您应该绑定到 jQuery Mobile 页面事件之一，例如 pageinit。

例如：

//place this in the global scope
$(document).on('pageinit', '#my-page', function () {
    $('#page1').click(function(event) {        
        $('#content').load($(this).attr('href'), function () {
            $('#content').trigger("create");
        }).trigger("create");
        return false;
    });
});

虽然您使用 ID 作为 click 事件处理程序的选择器，但您不妨将事件处理程序限制委托给 #page1 元素。

例如：

$(document).on('click', '#page1', function () {    
    $('#content').load($(this).attr('href'), function () {
        $('#content').trigger("create");
    }).trigger("create");
    return false;
});

这里是 jQuery Mobile 事件的文档（请参阅页面顶部的黄色大警告）：http://jquerymobile.com/demos/1.1.1/docs/api/events.html

Answer 2

我确信有更好的方法可以做到这一点，但您可以手动告诉它添加“ui-btn-active”类..

 $(function(){
    $('#page2').click(function(event) {  
        $(".ui-btn-active").removeClass("ui-btn-active");   
        $('#content').load($(this).attr('href')).trigger("create");
        $(this).addClass('ui-btn-active');
        return false;
    });
});