javascript - 在 1 个对象中应用 jQuery 函数 live()

Question

我有一个类似 Facebook 的聊天。 (您可以看到它@ http://www.live-pin.com/ )。它从 JSON 文件获取最后一条消息，并将其插入到每个用户的单独 UL 中，然后检查 ul 是否存在，如果不存在，则创建。现在的问题是，当我点击1个聊天栏时，3个同时打开，只有点击最后一个才关闭，我该怎么办？我希望该栏仅在单击聊天栏时打开/关闭，但如果单击 not_clickable 则不会打开/关闭。感谢您的帮助

$(document).ready(function(){
getOnJSON();
setInterval("getOnJSON()", 60000);

var Id;
var target;
});


    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);
        })*/;
    }


    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){
            $("#boxes").append('<div id="chat_'+from+'_lp" class="chat_box hidden_box clickable_box"><div id="chat_'+from+'_nick" class="chat_name">'+from+'</div><div class="not_clickable"><ul id="chat_'+from+'_txt" class="chat_txt"><li id="' + msg_id + '">'+ msg_txt+'</li></ul><form class="chat_new_message" name="new_msg"><input type="text" placeholder="Enter your message..." class="chat_new_input"/></form></div></div>');    

$('.hidden_box #chat_'+from+'_nick').live("click", function(){ showChat('#chat_'+from+'_lp'); });
$('.active_box #chat_'+from+'_nick').live("click", function(){ hideChat('#chat_'+from+'_lp'); });
        }else{

            $("#chat_"+from+"_txt").append('<li id="' + msg_id + '">'+ msg_txt+'</li>');

$('.hidden_box #chat_'+from+'_nick').live("click", function(){ showChat('#chat_'+from+'_lp'); });
$('.active_box #chat_'+from+'_nick').live("click", function(){ hideChat('#chat_'+from+'_lp'); });
        }
    });
});
}

Answer 1

您需要使用 jquery .live() 函数将 .click() 应用于文档加载完成后创建的元素。

例如:$("a.offsite").live("click", function(){alert("Goodbye!"); }); 是 here 中的示例