javascript - 使用 Jquery 追加表时获取特定值的子键
问题描述
我创建了一个表并使用 Jquery 将来自 firebase 信息的所有用户数据库放入其中。问题是:我在表中有一个按钮,当您单击按钮控制台打印数据库中的元素键时,该按钮应该是。
var userDataRef = firebase.database().ref("User/3N2f2rJSSAZmFOdZEeJdlsuEZam2").orderByKey();
userDataRef.on('child_added', function(childSnapshot) {
var key = childSnapshot.key;
var childData = childSnapshot.val();
var title_val = childData.Title;
var url_val = childData.Url;
// Append data
$("#data").append("<tr><td>" + title_val + "</td><td><a href=" + url_val + " target='_blank'> <button class='box'>GO</button></a></td><td><button id='del' class='box'>Delete</button></a></td><</tr>");
$('#data').on('click', '#del', function(){
console.log(key)
});
<table border="0" style="height: 63px; width: 100%;">
<thead>
<tr>
<div class="column middle" style="background-color:#f8f8f8;">
<td>Title</td>
<td style="width: 40%;" >Link</td>
<td style="width: 10%;" >Delete</td>
</div>
</tr>
</thead>
<tbody id="data" >
</tbody>
</table>
当此功能执行时,我会删除所有键,而不仅仅是来自确切原始的键
$('#data').on('click', '#del', function(){
console.log(key)
});
output :
-LkT_afLi9nfn65OS2QJ database.js:17:17
-LkTciKQVEa2bsbtSwkW database.js:17:17
-LkTclDO8dYSBfgiBjAZ
解决方案
ID 不应该重复,而是使用按钮的类作为公共属性。