4

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

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

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

索引.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>

因此，在导航中单击“Page 1”或“Page 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/

任何帮助表示赞赏。我现在在这里存了几个小时...

4

2 回答 2

4

您的问题出在这一行：

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

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

您可以利用可以传递给的回调函数在正确的时间.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

附注：

使用document.readyjQuery Mobile 时不建议使用事件处理程序。相反，您应该绑定到 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

于 2012-09-18T22:27:30.733 回答
0

我敢肯定有更好的方法来做到这一点，但你可以手动告诉它添加“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;
    });
});
于 2012-09-18T21:38:08.003 回答