要素の作成とイベントハンドラの割り当てjQuery

Question

Facebookのようなチャットを作成しています。 JSONファイルから最新のメッセージ "Not Not"を取得し、 "UL"要素にテキストを追加します。 "LI"をボックスに追加します。ボックスが存在しない場合は、テキストを作成して添付します。私はそのdivをクリックするとマージンボトムネガを使って隠れていて、もう一度クリックするとMargin-Bottom：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を渡していますが、正しく使用していません。 removeAttr('onclick')の代わりにunbind('click')を使用してください。

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