ボタン

Question

を付加し、リストからデータを取得しようとすると、私は、このようになりますリストを持っているAppended List

と、これはHTMLコードです：

 <!-- Two Line List with secondary info and action --> 

    <ul id = "contactList" class="demo-list-two mdl-list"> 
    <li class="mdl-list__item mdl-list__item--two-line"> 
     <span class="mdl-list__item-primary-content"> 
     <i class="material-icons mdl-list__item-avatar">person</i> 
     <span id="contactId" class="contactId1">Name</span> 
     <span class="contactInformation mdl-list__item-sub-title">Information</span> 
     </span><div class="mdl-layout-spacer"></div> 
     <span class="mdl-list__item-secondary-content"> 
     <span class="mdl-list__item-secondary-info"></span> 
     <a class="mdl-list__item-secondary-action" href="#"><button id="viewContact" onclick="viewContact1()" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"> 
    View 
</button></a> 
     </span> 
    </li> 

    </ul> 

これはjavascriptのコードです：

function show(){ 
    $("#contactList li").remove(); 

var user = firebase.auth().currentUser; 

if (user != null) { 
user.providerData.forEach(function (profile) { 
    var email = profile.email; 
    var emailsplit = email.split(".") 
    var userid = emailsplit[0] 
    var contact = emailsplit[1] 
var test = document.getElementById("test"); 
test.innerHTML = userid; 

var firebaseRef1 = firebase.database().ref("Ecard/business cards" + userid).orderByKey(); 


firebaseRef1.once('value', function(snapshot) { 
snapshot.forEach(function(childSnapshot) { 
    var id = childSnapshot.key; 
    var Information = childSnapshot.val(); 
    // ... 

    // ... 


    $("#contactList").append("<li class='mdl-list__item mdl-list__item--two-line'><span class='mdl-list__item-primary-content'><i class='material-icons mdl-list__item-avatar'>person</i><span class='contactId1' id='contactId'>" + id + "</span><span class='contactInformation mdl-list__item-sub-title'>" + Information + "</span></span><div class='mdl-layout-spacer'></div><span class='mdl-list__item-secondary-content'><span class='mdl-list__item-secondary-info'></span><a class='mdl-list__item-secondary-action' href='#viewContact'><button id='viewContact' onclick='viewContact1()' class='mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored'>View</button></a></span></li>"); 

    }); 
}); 
}); 
} 
}); 
// ... 

"contactInformation"と "contactId"から特定のリスト項目のデータをリレー/取得するために、ビューボタンをプログラムしたいと考えています。これまでのところ私はこの実装：

function viewContact1(){ 
    var id = document.getElementById("contactId").innerHTML; 

    alert(id); 

をしかし、それは最初のリスト項目の代わりに、リスト項目の上から返します。どのように私はこれを修正するのですか？

ps。データベースからの情報には、ランダムに生成されたキーがあり、アプリケーションのユーザーによって追加されたり削除されたりするため、決して設定された量のデータにはなりません。

私は2番目のリスト項目のビューをクリックした後：あなたは新しい連絡先を作成すると、あなたが「contactId」IDを作成していきますので、 screenshot 2

Answer 1

これが起こります。あなたはそれらの多くを持っているので、方法はそれらの最初を取得します。代わりに、あなたのビューとボタンdynamicaly（DOMノード）を作成することを検討し、それの後にリスナーを添付しなかったとして、追加の
：

var ul = document.getElementById("contactList"); 
var li = document.createElement("li"); 
li.className = "mdl-list__item mdl-list__item--two-line" 
//Create you spans etc. I am skipping to button for detailed info look HTML DOM Nodes 
var button = document.createElement("button") 
button.append(document.createTextNode("View")) 
button.addEvenetListener('click', function(){ 
    //This id is the id that you have declared 
    alert(id); 

}); 
li.append(button); 
ul.append(li) 

あなたは