イベントハンドラがjQueryと連携していません

Question

FacebookやGmailのようなチャットをしていますが、何かがうまく機能していません。私は5つの会話を開いている場合、ただ1つが動作し、1つだけが表示/非表示になります。あなたはlive-pin.comでそれを見ることができます。すべてのコードを貼り付けると、私のサイトをすべて貼り付ける必要があります。

しかし、ここでチャットコードの少しだ

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/end.emu.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+"").length === 0){ 
      $("#boxes").append('<div id="chat_'+from+'" class="chat_box hidden_box">'+ 
       '<div id="'+from+'_nick" class="chat_nick">'+from+'</div>'+ 
       '<ul id="'+from+'_txt" class="chat_txt">'+ 
        '<li id="'+msg_id+'_txt_msg" class="chat_txt_msg">'+ msg_txt+'</li>'+ 
       '</ul>'+ 
       '<form class="new_message" method="POST" id="new_msg_'+from+'">'+ 
        '<input type="text" placeholder="Enter your message..." id="'+from+'_input" class="new_input" name="post_text" />'+ 
        '<input type="hidden" name="to" value="'+from+'" />'+ 
         '</form>'+ 
         '</div>');  
      $('#new_msg_'+from).submit(submitChatMsg); 
      $('#'+from+'_txt').jScrollPane({stickToBottom: true}); 
      $('#'+from+'_nick').live("click", function(){ toggleChat('#chat_'+from); }); 
      // $('#boxes').delegate('.chat_nick', 'click', function() { toggleChat('#chat_'+this.id.replace('_nick', '')); }); 
      $('body').append('<embed src="http://cdn.live-pin.com/assets/pling.mp3" autostart="true" hidden="true" loop="false">'); 

     }else{ 
      var pane2api = $('#'+from+'_txt').data('jsp'); 
      var originalContent = pane2api.getContentPane().html(); 
      pane2api.getContentPane().append('<li id="'+msg_id+'_txt_msg" class="chat_txt_msg">'+ msg_txt+'</li>'); 
      pane2api.reinitialise(); 
       $('embed').remove(); 
      $('body').append('<embed src="http://cdn.live-pin.com/assets/pling.mp3" autostart="true" hidden="true" loop="false">'); 
     } 
    }); 
    }); 
} 

UPDATE：は、表示/非表示の問題を修正しました。現在の主な問題は、複数のフォーム.new_messageのうちの1つだけがサブミットされ、メッセージはAJAX〜POSTですが、最後に作成されたものだけが使用されることが主な問題です。それらはすべて動的に作成され、異なるIDが割り当てられます。

$('.new_message').live('submit',function(){ 
    contactForm = $(this); 
    valor = $(this + 'input:text').val(); 
    destinatary = $(this + 'input[type=hidden]').val(); 
    reponse_id = destinatary + "_input"; 
    if (!$(this + 'input:text').val()) { 
     return false; 
    } else { 
     $.ajax({ 
      url: "/ajax/end.emu.php?ajax=true", 
      type: contactForm.attr('method'), 
      data: contactForm.serialize(), 
      // success: submitFinished 
      success: function(data){ 
       responsed = $.trim(data); 
       if (responsed != "success") { 
        alert("An error occured while posting your message"); 
       }else{ 
        $('#' + reponse_id).val(""); 
       } 
      } 
     }); 
     return false; 
    } 

}); 

Answer 1

 $('.chatBox').live('click', function(e){ toggleChat($(this)); }); 
     function toggleChat(obj) 
     { 
      current_margin = obj.css('bottom'); 
      if (current_margin == "0px"){ 
       obj.animate({bottom : "-270px"}); 
      } 
      else 
      { 
       obj.animate({bottom : "0px"}); 
      } 
     }