繁体   English   中英

jquery mobile没有将div添加到内容中

[英]jquery mobile didn't append div to content

我有一个脚本,它应该向Content div添加一些元素,但它不起作用。 如您所见,“messageBox”的内容是从一个php文件到达的,该文件选择了mysql表及其中的数据。

这是JS文件的内容:

    function getWallMsg(){
    $.getJSON('SELECT_uzenofal.php?callback=?',function(data) {
        data.forEach(function(e){
            $('#posts').append($('<div class="messageBox">'+'<img src="img/profilok/'+e.kep+'"/>'+'<p class="name">'+e.nev+'</p>'+'<p>'+e.uzenet+'</p>'+'<p class="time">'+e.ido+'</p>'+'</div>'));
        });
    });
}

$(document).ready(function(){
    drawNavbar();
    getWallMsg();
});

和HTML:

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" >
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
    <!-- Home -->
    <div data-role="page" id="fal">
        <!-- header -->
        <div data-role="header">
            <h3>
                Üzenőfal
            </h3>
        </div>
        <!-- content -->
        <div data-role="content" id="posts">

        </div>
        <!-- footer -->
        <div class="nav" data-role="footer" data-position="fixed" data-theme="a"></div>
    </div>
</body>

我该怎么办?

这应该改变:

$(document).ready(function(){
    drawNavbar();
    getWallMsg();
});

对此:

$(document).on('pagebeforeshow', '#fal', function(){       
    drawNavbar();
    getWallMsg();
});

基本上document ready不应该与jQuery Mobile一起使用,要了解更多关于这个看看这篇文章 ,要透明它是我的个人博客。 或者在这里找到它。

基本上,当页面内容未加载到DOM时,您正尝试将其附加到document ready状态。 相反,应该使用正确的jQuery Mobile页面事件,例如pagebeforeshow

编辑:

你甚至在pagebeforeshow中添加了一个不正确的id。 它现在应该工作。

无法发表评论所以发帖回答。

$('#posts').append($('<div class="messageBox">'+'<img src="img/profilok/'+e.kep+'"/>'+'<p class="name">'+e.nev+'</p>'+'<p>'+e.uzenet+'</p>'+'<p class="time">'+e.ido+'</p>'+'</div>'));

你有没有试过改变上面的

$('#posts').append('<div class="messageBox">'+'<img src="img/profilok/'+e.kep+'"/>'+'<p class="name">'+e.nev+'</p>'+'<p>'+e.uzenet+'</p>'+'<p class="time">'+e.ido+'</p>'+'</div>');

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM