jQuery移动端未将div附加到内容中。

Question

jQuery移动端未将div附加到内容中。

3

我有一个脚本，应该将一些元素添加到Content div中，但它没有起作用。正如您所看到的，"messageBox"的内容来自于一个选择mysql表并从中选择数据的php文件。

以下是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>

我该怎么办？

- Gábor

2个回答

0

无法评论，因此发布为答案。

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

- Najeeb K

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gajotres · Accepted Answer

这应该被改变：

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

转换为：

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

基本上，jQuery Mobile 不应使用 document ready。想了解更多信息，请查看此ARTICLE（这是我的个人博客内容）。或者在HERE找到它。您正在尝试在DOM中未加载页面内容时将其附加到document ready上。相反，应使用适当的jQuery Mobile页面事件，例如pagebeforeshow。 编辑： 您将错误的id添加到了pagebeforeshow中。现在应该可以工作了。