jQuery / Javascript:如何在不返回上一个前置元素顶部的情况下添加元素?

时间:2014-06-11 07:59:04

标签: javascript jquery html css html5

每当我点击prepend时,在所有元素都被添加到前面后,聊天区域的视图就会切换到聊天区域的顶部或最后一个前置元素。这与append不同,在附加所有元素之后,聊天区域的视图不会切换到聊天区域的末尾或最后添加的元素但仍保留在其之前位置。

如果聊天区域的视图更改类似于FB&#39,我如何使prepend功能与append的操作方式相同; s加载以前的消息功能?

以下示例代码说明了我的意思。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
    .chatbox{
        border:1px solid #2a6496;
        height: 600px;
        margin-top:50px;
    }
    .chatbox div{
        height: 100%;
    }
    .rightP{
        border-left: 1px solid #2a6496;
    }
    .rightP .contents{
        border-bottom: 1px solid #2a6496;
        height: 70%;
    }
    .rightP .send{
        padding : 5% 5% 5% 5%;
        height: 30%;
    }

    #response{
        height: 200px;
        overflow-y: scroll;
        overflow-wrap: break-word;
    }

</style>
<script>
    function appendMessage()
    {
        var data = 'hello';
        var message = document.createElement('p');
        message.innerHTML = data;
        console.log(message.innerHTML);
        $('#response').append(message);
        $('#response').append($('.load'));
    }
    function prependMessage()
    {
        for(var $i = 0;$i<10;$i++)
        {
            var data = 'hello'+$i;
            var message = document.createElement('p');
            message.innerHTML = data;
            console.log(message.innerHTML);
            $('#response').prepend(message);
            $('#response').prepend($('.load2'));
        }
    }
</script>
<body>
<div class="container">
    <div class="chatbox">
        <div class="col-sm-8 rightP">
            <div class="row contents">
                <div class="row msg">
                    <div id="response" class="msg form-group">
                        <a onclick="return appendMessage()" class="load btn btn-default">Append</a>
                        <a onclick="return prependMessage()" class="load2 btn btn-default">Prepend</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

2 个答案:

答案 0 :(得分:0)

在HTML中,你的onlick应该是return

<a onclick="return loadMessage();" class="load btn btn-default">Load More Msg</a>

在JS中,您需要将return false添加到您的函数loadMessage

var loadMessage = function(){
    var firstMessage = $messagesWrapper.find('> p:nth-child(2)');
    $.ajax({
        ....
        if(messages.length<10){
                   $('.load').hide();//hide the load button if remaining messages to load is <10
                }
        success: function(messages){
            $.each(messages, function() {
               prependMessage(this);
           });
       },
       ....
   });

   return false;
};

答案 1 :(得分:0)

试试这个:

<div id="response" class="msg form-group">
     <a onclick="loadMessage(); return false;" class="load btn btn-default">Load More Msg</a>
</div>

如果这不起作用,请尝试其他方式:

var loadMessage = function(){
    e.preventDefault(); // preventing any scroll action
    var firstMessage = $messagesWrapper.find('> p:nth-child(2)');
    (...)

var prependMessage = function(data){
     e.preventDefault(); // preventing any scroll action
     var message = document.createElement('p');
     (...)

如果这不起作用,请提供完整的代码,以便我们重现。