Question

我有一个脚本应该将一些元素附加到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>

我该怎么办？

Answer 1

这应该改变：

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

到此：

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

基本上 document ready 不应与 jQuery Mobile 一起使用，要了解更多相关信息，请查看 {{ 3}} ，要透明，这是我的个人博客。或者找到 ARTICLE 。

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

编辑：

您甚至在pagebeforeshow中添加了错误的ID。它现在应该工作。

Answer 2

无法发表评论，因此张贴为答案。

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

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

2 个答案: