带有firebase的javascript方法在聊天页面中显示两次或多次显示值。每当我回到页面并来聊天页面

I am creating a simple chat page using firebase Whenever I go to back page from current page(Chat page) and coming back to chat page and sending a message "Hi" it is displaying two times in chat page, if I return back to another page and again come back to chat page and send message, it is showing 3 times same vice versa it is showing multiple times.

我正在使用firebase创建一个简单的聊天页面每当我从当前页面返回页面(聊天页面)并回到聊天页面并发送消息“嗨”它在聊天页面中显示两次,如果我返回到另一个页面再次回到聊天页面并发送消息,它显示3次相同,反之亦然,它显示多次。

The bellow is my coding. Please some one guide me..

吼叫是我的编码。请一些人指导我..

$(document).on('pagebeforeshow', '#chatpage', function() {

    var ref = new Firebase("https://firechatweb-60edc.firebaseio.com/6pzzmujf");
    $("#images6").empty();
    ActivityIndicator.show();
    ref.orderByChild("messages").on("child_added", function(snapshot) {

        $("#images6").append(movielist(snapshot.val()));

        var last_li = $("ul li:last-child").offset().top;

        //alert(last_li);
        setTimeout(function() {
            $.mobile.silentScroll(last_li);
        }, 50);

        //console.log(JSON.stringify(snapshot.key()) + " was " +JSON.stringify(snapshot.val()));
        ActivityIndicator.hide();




    });


});




function movielist(item) {
    //return "<li style='height:43px; border-bottom: 1px solid grey; font-size:15px; margin-top:18px;' ><a href='#' style='text-decoration:none;' data-name="+item.text+"><span class='left'>"+item.text+"</span><div class='clear'></div></a></li>";
    return "<li style='font-size:15px; margin-top:18px;' margin-left:10px;><a href='#' style='text-decoration:none;' data-name=" + item.text + "><span class='left'>" + item.text + "</span><div class='clear'></div></a></li>";
}


$("#button").click(function() {


    //alert("Hi");
    var u = $.trim($("#uname").val());
    var p = $("#pwd").val();
    localStorage.setItem("locuname", u);
    localStorage.setItem("locpwd", p);

    var v = localStorage.getItem("locuname");
    var m = localStorage.getItem("locpwd");



    if (typeof(Storage) !== "undefined") {
        $.mobile.changePage("#chatpage", {
            transition: "slideup",
            changeHash: false
        });
    } else {
        // Sorry! No Web Storage support..
        console.log("Please Login");
    }

});




$("#send").click(function() {
    var mes = $("#message").val();
    if (mes.length == 0) {
        //alert("Please Enter Text");
        navigator.notification.alert(
            'Please Enter Text', // message
            alertDismissed, // callback
            'Text Message', // title
            'Done' // buttonName
        );


    } else {
        var v = localStorage.getItem("locuname");
        var ref = new Firebase("https://firechatweb-60edc.firebaseio.com/6pzzmujf");

        ref.push({
            name: v,
            text: mes,
            photoUrl: "/images/profile_placeholder.png"
        });



        $('#message').val('');

        var last_li = $("ul li:last-child").offset().top;
        setTimeout(function() {
            $.mobile.silentScroll(last_li);
        }, 50);

    }

});

function alertDismissed() {
    // do something
}

1 个解决方案

#1

You're attaching a new listener each time the page is shown:

每次显示页面时,您都会附加一个新的侦听器:

$(document).on('pagebeforeshow', '#chatpage', function() {
    var ref = new Firebase("https://firechatweb-60edc.firebaseio.com/6pzzmujf");
    $("#images6").empty();
    ActivityIndicator.show();
    ref.orderByChild("messages").on("child_added", function(snapshot) {

In this case you should also detach the listener when the page is being hidden:

在这种情况下,您还应该在隐藏页面时分离侦听器:

$(document).on('pagebeforehide', '#chatpage', function() {
    var ref = new Firebase("https://firechatweb-60edc.firebaseio.com/6pzzmujf");
    $("#images6").empty();
    ActivityIndicator.show();
    ref.orderByChild("messages").off("child_added");

#1