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事件处理程序的选择器，但您也可以将事件处理程序strait委派给#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;
    });
});

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

2 个答案: