Jquery Firebase为以前的聊天信息添加回拨

我想添加一个回调，以便在单击用户时加载以前的消息

以下是我到目前为止的情况：

var messagesRef = new Firebase("https://fbname.firebaseIO.com/messages");
var userListRef = new Firebase("https://fbname.firebaseIO.com/userlist");   
userListRef.on("child_added", function (snapshot) {
        var user = snapshot.val();
        if (user.accessk != name) {
            $("<input type='radio' / >")
              .on("click", function () {
                var dt = $(this).val(), df = $(this).attr("data-fname"), dl = $(this).attr("data-lname"),
                       src = "temp/user/" + dt + ".jpg";

                messagesRef.child(child_id).update({ dtelog: Math.random() });
                messageList.html(""); });
            }

    });
    messagesRef.on('child_added', function (snapshot) {
        var data = snapshot.val(), dtes = data.date, src = data.pic, sender = data.sender, reciever = data.reciever, message = data.text,
                     ui = checker, username = userN, style_c = "";
        if (sender != username) { style_c = "message chat"; }
        else { style_c = "message user"; }

        var messageElement = "Message here has HTMLtags";
        messageElement.find('.bubble').html(message);
        if (((sender == username) && (reciever == checker)) || ((sender == checker) && (reciever == username))) {

            //ADD MESSAGE
            messageList.append(messageElement);
        }
        messageList[0].scrollTop = messageList[0].scrollHeight;
    });

var messagesRef=新Firebase（“https://fbname.firebaseIO.com/messages");
var userListRef=新的Firebase（“https://fbname.firebaseIO.com/userlist");   
userListRef.on（“添加的子对象”，函数（快照）{
var user=snapshot.val（）；
if（user.accessk！=名称）{
$("")
.on（“单击”，函数（）{
var dt=$（this.val（），df=$（this.attr（“数据fname”），dl=$（this.attr（“数据lname”），
src=“temp/user/”+dt+”.jpg”；
messagesRef.child（child_id）.update（{dtelog:Math.random（）}）；
html（“”；}）；
}
});
messagesRef.on（'child_added'，函数（快照）{
var data=snapshot.val（），dtes=data.date，src=data.pic，sender=data.sender，receiver=data.receiver，message=data.text，
ui=检查者，username=userN，style_c=“”；
如果（发件人！=用户名）{style_c=“消息聊天”；}
else{style_c=“消息用户”；}
var messageElement=“此处的消息具有HTMLtags”；
messageElement.find（'.bubble'）.html（message）；
如果（（发送者==用户名）和（&&（接收者==检查者））| |（（发送者==检查者）和（&&（接收者==用户名）））{
//添加消息
messageList.append（messageElement）；
}
messageList[0]。scrollTop=messageList[0]。scrollHeight；
});

我的想法是在

$（“”）中添加
messagesRef.on（'child_added'，function（snapshot）{}
函数

它正确显示消息，但在我切换到另一个用户发送消息后，消息会显示两次。然后，如果我导航回上一个用户，它会显示三次。我尝试了多次，消息增量为1

谁能解释为什么会发生这种情况？
好吧..我通过浏览所有关于firebase的文章来解决我自己的问题，这对我来说是一个奇迹，因为我一直在stack中寻找关于我的问题的答案，但从上周起就再也找不到这个答案，我一小时前才找到这个

因此，我的解决方案基于我提供的文章，如下所示

   messageList.html("");  
messagesRef.off('child_added');  
messagesRef.on('child_added', function (snapshot) {
var data = snapshot.val(), dtes = data.dte, src = data.pic,sender = data.sender, reciever = data.reciever, message = data.text,
       ui =  checker, username = userN, style_c = "";
if (sender != username){ 
  style_c = "message chat";
} else  { 
  style_c = "message user";
  }

var messageElement = $('<div class="'+style_c+'"><div class="message-info">'+
     '<img width="40" height="40" src="temp/user/'+src+'.jpg">' +
         '<div class="message-timestamp">' +
         ' <time datetime="'+dtes+'" class="timeago uk-text-small">'+dtes+'</time>' +
         '</div></div>' +
       ' <div class="message-data">' +
       ' <div class="bubble"></div></div></div>');
    messageElement.find('.bubble').html(message).emoji();
 if (((sender == username) && (reciever == checker) )||((sender == checker) && (reciever == username) ))  
  {
       //ADD MESSAGE
        messageList.append(messageElement);
    }
   messageList[0].scrollTop = messageList[0].scrollHeight;
 }); 

messageList.html（“”）；
messagesRef.off（'child_added'）；
messagesRef.on（'child_added'，函数（快照）{
var data=snapshot.val（），dtes=data.dte，src=data.pic，sender=data.sender，receiver=data.receiver，message=data.text，
ui=检查者，username=userN，style_c=“”；
如果（发件人！=用户名）{
style_c=“消息聊天”；
}否则{
style_c=“消息用户”；
}
var messageElement=$（“”+
'' +
'' +
“+dtes+”+
'' +
' ' +
' ');
messageElement.find（'.bubble'）.html（message.emoji（）；
如果（（发送者==用户名）和（&&（接收者==检查者））| |（（发送者==检查者）和（&&（接收者==用户名）））
{
//添加消息
messageList.append（messageElement）；
}
messageList[0]。scrollTop=messageList[0]。scrollHeight；
}); 

在继续调用另一个
messagesRef.on（'child_added'，函数（快照）{}）之前，我添加了
messagesRef.off（'child_added'）
以首先删除侦听器
这样，即使我导航到另一个用户给他/她一条私人消息，消息显示也不会增加，从而导致重复消息显示。虽然这是答案，但我不知道这种代码结构是否符合标准
如果有人能检查我的答案是否合适，我将不胜感激，即使它能工作..谢谢：）
您能将代码减少到重现问题所需的最小值吗？另外，请包括设置
userListRef
和
messagesRef
的行。ok done@FrankvanPuffelen现在可以帮我吗？很好地解决了这个问题，并且+1用于回来更新我们。是的，关闭您的侦听器变得更重要，因为您有单页导航元素。很高兴看到另一个问题帮助了你。你能接受你自己的答案吗？这样别人就会知道这是解决你问题的正确方法。