jquery bottom chat bar가있는 hep

Question

안녕하세요 jquery/javascript 채팅 상자에 마지막 남은 부분은 채팅을 복제하면 작동하지 않습니다. 은 javascript로 복제합니다.

이것은 몇 개 div의 ID를 복제하고 변경하는 자바 스크립트 코드입니다.

예 : ch, chat 및 chatbox ids/classes가 변경됩니다. 예를

<div class="chat" id="chat"> 
<div id="ch" class="ch"> 
       <h2>Chat</h2></div> 
       <div class="chatbox" id="chatbox"> 
       <div class="messages"></div> 
       <textarea id="message" class="chatinp" 
       rows="3" cols="27"></textarea> 
       <button class="send">Send</button></div> 
</div> 

과 매번에 대한 하나

그것은 ... 그것은 채팅, 채널 및 chatbox의 ID를 변경하지만 이렇게 같은 같은

원래의 유지 클론

clone1

<div class="chat" id="chat1"> 
    <div id="ch1" class="ch"> 
        <h2>Chat</h2></div> 
        <div class="chatbox" id="chatbox1"> 
        <div class="messages"></div> 
        <textarea id="message" class="chatinp" 
        rows="3" cols="27"></textarea> 
        <button class="send">Send</button></div> 

</div> 

12,

Clone2

<div class="chat" id="chat2"> 
<div id="ch2" class="ch"> 
       <h2>Chat</h2></div> 
       <div class="chatbox" id="chatbox2"> 
       <div class="messages"></div> 
       <textarea id="message" class="chatinp" 
       rows="3" cols="27"></textarea> 
       <button class="send">Send</button></div> 
</div> 

var num = new Number(); 
num = 0 



function chat(){ 
if(!document.getElementById("chat")){ 
var chatdiv = document.createElement('div'); 
    chatdiv.id = 'chat'; 
    chatdiv.className = 'chat'; 
    chatdiv.innerHTML = 
       ['<div id="ch" class="ch">', 
       '<h2>Chat</h2></div>', 
       '<div class="chatbox" id="chatbox">', 
       '<div class="messages"></div>', 
       '<textarea id="message" class="chatinp" ', 
       'rows="3" cols="27"></textarea>', 
       '<button class="send">Send</button></div>' 
       ].join(' ') 
    document.body.appendChild(chatdiv); 

} 
else 
{ 
var obj = document.getElementById("chat").cloneNode(true), 
     children = obj.childNodes; 
    num += 1; 
//change the id of the cloned element 
    obj.id = obj.id+num; 

    //traverse the child nodes of obj to 
    //change id (call function changeId) 
    if (num<16){ 
     changeId(children,num); 
    } 

    //now appending obj to the document.body should be sufficient 
var p = $(".chat"); 
var offset = p.offset(); 
var left = offset.left + 261; 
//now appending obj to the document.body should be sufficient 
document.body.appendChild(obj); 
document.getElementById("chat").style.left = left + "px"; 

    //demonstrate that the id value has changed 
    var nwchatbox = document.getElementById('chatbox'+num) 
    nwchatbox.value = 'my id = '+nwchatbox.id; 

    //function to add number to id's of a nodelist (recursive) 
    //used in the above 
    function changeId(nodes, n){ 
    for (var i=0;i<nodes.length;i=i+1){ 
    if (nodes[i].childNodes){ 
      changeId(nodes[i].childNodes,n); 
    } 
    //if id value is 'ch' or 'chatbox', change it 
    if(nodes[i].id && /^ch$|^chatbox$/i.test(nodes[i].id)) { 
     nodes[i].id += String(n); 
    } 
    } 
    } 
} 
} 

확인을 내 질문에 내가 대화 상자의 개성 과 내가 그것을 변경하는 대화 상자를 복제 할 때마다이가 인스턴스를 추가 slideToggle 어떻게입니다 jquery에 복제품이 열리니까?

"ch"id/class를 눌러 채팅 상자를 열면 chatbox 클래스/id가 푸시됩니다. $('#ch'+num).click(clickHandler)

:하지만 당신이 chatbox을 복제 한 후, 다른 클릭 핸들러를 등록해야합니다 당신의 도움이

Answer 1

오른쪽에 대한

덕분에 "CH"DIV의 ID를 변경, 내가 그것을 복제 할 때마다 기억 clickHandler 일반을 만들어야합니다. 그래서 처리기는 다음과 같이 보일 것입니다 :

function clickHandler(e){ 
    var id = this.id.substring(2); 
    //Now initiate sliding behavior 
    $("#chatbox"+id).slideToggle(...); 
}