创建元素并分配事件处理程序 vía jQuery

Question

我正在创建一个类似Facebook的聊天。它从JSON文件中获取最新消息"Not Read"，并将文本附加到一个框中的"UL"元素vía"LI"。如果框不存在，它将创建并附加文本。我希望当我单击该div时，它会使用边距底部负数隐藏，当我再次单击它时，它显示为边距底部：0。请帮帮我，因为它根本不起作用。结果是，当我点击框时，它并没有像预期的那样显示/隐藏。

    function showChat(id){
    $(this).animate({marginBottom : "0"}).removeClass("hidden_box").addClass("active_box").removeAttr('onclick').click(function(){
           hideChat(Id);
        });
    }
    function hideChat(id){
    $(this).animate({marginBottom : "-270px"}).removeClass("active_box").addClass("hidden_box").click(function(){
           showChat(Id);
        });
    }
    function getOnJSON(){
    var from;var to;var msg_id;var msg_txt;var new_chat_string;
    //Getting the data from the json file
    $.getJSON("/ajax/chat.json.php",function(data){
    $.each(data.notif, function(i,data){
    from = data.from;to = data.to;msg_id = data.id;msg_txt = data.text;
            if ($("#chat_"+from+"_lp").length === 0){
           new_chat_string = '<div id="chat_'+from+'_lp" class="chat_box hidden_box clickable_box"><div id="'chat_+from+'_nick" class="chat_name">'+from+'</div><ul id="chat_'+from+'_txt" class="chat_txt"><li id="' + msg_id + '">'+ msg_txt+'</li></ul></div>';
            $("#boxes").append(new_chat_string);    
            $('#chat_'+from+'_lp').click(function() {showChat(this);});
        }else{
            $("#chat_"+from+"_txt").append('<li id="' + msg_id + '">'+ msg_txt+'</li>');
            $('#chat_'+from+'_lp').click(function() {showChat(this);});
        }
    });
});
}

Answer 1

在getOnJSON函数和对shoqwChat 的调用中进行了更改

function showChat(id){
    $(this).animate({marginBottom : "0"}).removeClass("hidden_box").addClass("active_box").removeAttr('onclick').click(function(){
           hideChat(Id);
        });
    }
    function hideChat(id){
    $(this).animate({marginBottom : "-270px"}).removeClass("active_box").addClass("hidden_box").click(function(){
           showChat(Id);
        });
    }
    function getOnJSON(){
    var self = this;     // Added this line, as this changes scope in each()
    var from;var to;var msg_id;var msg_txt;var new_chat_string;
    //Getting the data from the json file
    $.getJSON("/ajax/chat.json.php",function(data){
    $.each(data.notif, function(i,data){
    from = data.from;to = data.to;msg_id = data.id;msg_txt = data.text;
            if ($("#chat_"+from+"_lp").length === 0){
           new_chat_string = '<div id="chat_'+from+'_lp" class="chat_box hidden_box clickable_box"><div id="'chat_+from+'_nick" class="chat_name">'+from+'</div><ul id="chat_'+from+'_txt" class="chat_txt"><li id="' + msg_id + '">'+ msg_txt+'</li></ul></div>';
            $("#boxes").append(new_chat_string);    
            $('#chat_'+from+'_lp').click(function() {showChat(self);});
        }else{
            $("#chat_"+from+"_txt").append('<li id="' + msg_id + '">'+ msg_txt+'</li>');
            $('#chat_'+from+'_lp').click(function() {showChat(self);});
        }
    });
});
}

Answer 2

按如下方式更改showChat和hideChat。您正在从click处理程序传递this，但没有正确使用它。此外，使用unbind('click')而不是使用removeAttr('onclick')。

    function showChat(obj){
        $(obj).animate({marginBottom : "0"}).removeClass("hidden_box").addClass("active_box").unbind('click').click(function(){
           hideChat(this);
        });
    }
    function hideChat(obj){
        $(obj).animate({marginBottom : "-270px"}).removeClass("active_box").addClass("hidden_box").unbind('click').click(function(){
           showChat(this);
        });
    }