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

首先,我是jQuery和JavaScript的新手,但不是HTML和PHP.

我发现很多关于这个问题的帖子但没有解决方案.我想我做的事情(完全？)错了……

我有两个文件,index.PHP和content.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/

任何帮助表示赞赏.我现在在这里待了好几个小时……

解决方法:

你的问题在于这一行：

$('#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

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

相关推荐