js评论追加？

Question

有一个评论回复的问题 就是点击圈出来的那个评论图标，底部的输入框会出现，点击发送，输入框的内容会追加到对应的评论按钮下面的评论列表里，代码如下：

$(document).on("click",".eval-trigger",function () {

        $("#ringBar").show();
        var $evalList = $(this).parents(".ring-footer-bar").siblings(".eval-list");
        $(".btn-send").on("click",function(){
            var $input = $("#chatInput");
            if($input.html()===""){
                return false
            }else{
                $evalList.append(' <li class="eval-item">\n' +
                    '                        <h5>某某某:</h5>\n' +
                    '                        <p>'+$input.html()+'</p>\n' +
                    '                    </li>');
                $input.html("");
            }
        })
    })
    
    “.eval-trigger”是那个评论的图标按钮 ；
    “.ring-footer-bar”是评论，分享，点赞 三个元素的 大容器div
    “.eval-list” 是相邻的评论列表
    
    现在的问题是 点了第一个评论后 可以成功追加，但是再去点第二个，内容还是追加在第一个下面！
    

Answer 1

理论上你这种写法每次点击评论图标就为发送按钮重新注册了一个点击事件

试试这样

var curList = null;
$(document).on("click",".eval-trigger",function () {
    $("#ringBar").show();
    curList = $(this).parents(".ring-footer-bar").siblings(".eval-list");
})
    
$(".btn-send").on("click",function(){
    var $input = $("#chatInput");
    if($input.html()===""){
        return false
    }else{
        curList.append(' <li class="eval-item">\n' +
                    '                        <h5>某某某:</h5>\n' +
                    '                        <p>'+$input.html()+'</p>\n' +
                    '                    </li>');
                $input.html("");
    }
})

Answer 2

你的问题很简单：siblings是相邻的元素，是整个文档的，包括上面也是；也就是说，你的这段代码

var $evalList = $(this).parents(".ring-footer-bar").siblings(".eval-list");

$evalList 是个数组，里面包含了 从第一个评论区到最后一个评论区。

所以 你执行 $evalList.append 的时候，永远是 第一个。