アンカークリックに基づいてInnerHTMLを変更します

Question

私はWeb開発には少し新しく、私は誰かが私のためにこれに答えることを望んでいました。

Facebookメッセンジャーに似た「Web Messenger」のプロトタイプを構築しています。ウィンドウがロードされたときにアンカータグのULが埋め込まれたサイドバーがあり、それはthisのように見えます。ここで私は、現在のチャットに関するいくつかの詳細が表示されますが、当面は、単に、と同じようにチャットの名前を表示するページの上部に本部を持っていること

var toAdd = document.createDocumentFragment(); 
var newUL = document.createElement('ul'); 
newUL.id = 'menu-content'; 
newUL.className = 'menu-content collapse out'; 

for(var i = 0; i < 5; i++){ 
    var newLI = document.createElement('li'); 
    var newA = document.createElement('a'); 
    newA.id = 'chat' + i; 
    newA.setAttribute('href', "#"); 
    newA.innerHTML = "Chat" + (i + 1); 
    newLI.appendChild(newA); 
    newUL.appendChild(newLI); 
} 

toAdd.appendChild(newUL) 
document.getElementById("menu-list").appendChild(toAdd); 

ためのコードがありますアンカータグに私は一度に20 +サイドバー上のチャットを持つことができるので、これはのように思えるしかし今、別のStackOverflowに基づいて

は、アンカータグからJS関数を呼び出すための正しい方法は

var c0 = document.getElementById("chat0"); 

//Set code to run when the link is clicked 
// by assigning a function to "onclick" 
c0.onclick = function(id) { 
    //Change Title Name here 
    //Do other stuff in the future 
    return false; 
} 

です投稿します繰り返し書くたくさんのコード。

これを行うより良い方法はありますか？

Answer 1

チャットには一般的なクラスを入力してください（例：chat）。.getElementsByClassName()を使用して、すべてのチャットにclickイベントを同時にアタッチします。

だから、あなただけのnewA.id後にクラス名を追加することができます。

newA.id = 'chat' + i; 
newA.className = 'chat'; 

次にクリックイベントを添付：

var chats = document.getElementsByClassName('chat'); 

for (var i=0; i < chats.length; i++) { 
    chats[i].addEventListener('click', chatClick, false); 
} 

function chatClick(){ 
    //chat is clicked 
    //The 'this' object here refer to clicked element 
} 

あなたは代わりのonclickの.addEventListener()を使用することができます。

注：あなたはノードを作成した後、直接clickイベントを添付することができます。

for(var i = 0; i < 5; i++){ 
    var newLI = document.createElement('li'); 
    var newA = document.createElement('a'); 
    newA.id = 'chat' + i; 
    newA.setAttribute('href', "#"); 
    newA.innerHTML = "Chat" + (i + 1); 
    newA.addEventListener('click', chatClick, false); //Attach click event HERE 
    newLI.appendChild(newA); 
    newUL.appendChild(newLI); 
    } 

このヘルプを願っています。

Answer 2

必ずご確認ください。今、Aタグはコードの実行後に追加されている場合は、単にこれを呼び出す必要が

$('a.className').click(function() { 
    // Your code here 
}); 

：あなたはそれらをすべてのクラスを与え、負荷後ちょうどそれらのすべてのためのonclickバインドするために、単純なjQueryコードを使用することができます再度それらの要素に手動でバインドします。