Javascript 在1对象中应用jQuery函数live()

Javascript 在1对象中应用jQuery函数live(),javascript,jquery,ajax,json,Javascript,Jquery,Ajax,Json,我有一个类似Facebook的聊天。(你可以看到它)。它从JSON文件获取最后的消息,并为每个用户插入一个单独的UL,然后检查UL是否存在,如果不存在,则创建。现在的问题是,当我单击1个聊天栏时,3个聊天栏同时打开,只有在单击最后一个聊天栏时才关闭,我该怎么办?我希望这个栏只在点击聊天栏时打开/关闭,但如果点击不可点击,则不会打开/关闭。谢谢你的帮助 $(document).ready(function(){ getOnJSON(); setInterval("getOnJSON()", 600

我有一个类似Facebook的聊天。(你可以看到它)。它从JSON文件获取最后的消息,并为每个用户插入一个单独的UL,然后检查UL是否存在,如果不存在,则创建。现在的问题是,当我单击1个聊天栏时,3个聊天栏同时打开,只有在单击最后一个聊天栏时才关闭,我该怎么办?我希望这个栏只在点击聊天栏时打开/关闭,但如果点击不可点击,则不会打开/关闭。谢谢你的帮助

$(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'); });
        }
    });
});
}
$(文档).ready(函数(){
getOnJSON();
setInterval(“getOnJSON()”,60000);
变量Id;
var目标;
});
功能showChat(obj){
$(obj).animate({marginBottom:“0”}).removeClass(“隐藏的_框”).addClass(“活动的_框”).unbind('click')/*.click(函数(){
希德卡特(本);
})*/;
}
功能hideChat(obj){
$(obj).animate({marginBottom:“-270px”}).removeClass(“活动的_框”).addClass(“隐藏的_框”).unbind('click')/*.click(函数(){
showChat(这个);
})*/;
}
函数getOnJSON(){
var self=this;//添加了此行,因为这会更改每个()中的范围
var-from;var-to;var-msg\u-id;var-msg\u-txt;var-new\u-chat\u-string;
//从json文件获取数据
$.getJSON(“/ajax/chat.json.php”),函数(数据){
$.each(data.notif,函数(i,数据){
from=data.from;to=data.to;msg_id=data.id;msg_txt=data.text;
如果($(“#聊天室”+来自+“lp”)。长度==0){
$(“#框”).append(“+from+”
  • “+msg#txt+”
  • ); $('.hidden_box#chat_'+from+''nick').live(“单击”,函数(){showChat('#chat_'+from+''lp');); $('.active_box#chat_'+from+''nick').live(“单击”,函数(){hideChat('#chat_'+from+''lp');); }否则{ $(“#聊天室”+来自+“txt”).append(“
  • “+msg_txt+”
  • ”); $('.hidden_box#chat_'+from+''nick').live(“单击”,函数(){showChat('#chat_'+from+''lp');); $('.active_box#chat_'+from+''nick').live(“单击”,函数(){hideChat('#chat_'+from+''lp');); } }); }); }
您需要为.click()使用jquery.live()函数,以便将其应用于文档加载完成后创建的元素


例如:
$(“a.offsite”).live(“单击”,函数(){alert(“再见!”;})是供参考的一个例子,过多的注释并不能使代码更易于阅读为什么会有这么多不必要的注释?它使阅读变得相当困难。什么不起作用?请更详细地描述该问题。我对此进行了更详细的描述,很抱歉出现了大量的注释。yi,
.live()
已被弃用。谢谢,这应该可以工作,但它不能。您可以看到在那里实现的代码,但它不起作用!角落里标有“new”字样的方框是您正在加载的聊天吗?好的,如果您在live()中使用“this”而不是“self”?也许可以尝试修复您的id=”“标签。。。每个元素中有2个id,该id与页面上的其他元素不唯一。还可以尝试使它发生任何事情,例如,不要调用showChat(this)而使用$(this).css('backgroundColor','yellow'),而不要调用函数。如果您可以让它在没有函数的情况下工作,那么请尝试调用该函数。用警报检查(本);要查看对象是否仍在定义中。抱歉,它不是计划用作空间的,我已将其修复且无法工作。