使用Jquery追加表时获取特定值的子键

Question

我创建了一个表，并使用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

Answer 1

您正在绑定到所有元素，并且正在复制ids。身份证是单数的。

最好要么单独绑定到一个按钮，要么绑定一个数据属性的事件委托。

userDataRef.on('child_added', function(childSnapshot) {
  /* cut out the vars */ 
  var myRow = $("<tr><td>" + title_val + "</td><td><a href=" + url_val + " target='_blank'> <button class='box'>GO</button></a></td><td><button class='box'>Delete</button></a></td></tr>");
  myRow.find("button").on("click", function(){
    console.log(key)
  });
  $("#data").append(myRow);
});

或具有数据属性的事件委托。

$("#data").on("click", "button[data-key]", function(evt){
  var btn = $(this);
  console.log(btn.data("key"))
});

userDataRef.on('child_added', function(childSnapshot) {
  /* cut out the vars */ 
  var myRow = $("<tr><td>" + title_val + "</td><td><a href=" + url_val + " target='_blank'> <button class='box'>GO</button></a></td><td><button class='box' data-key='" + key + "'>Delete</button></a></td></tr>");      
  $("#data").append(myRow);
});

Answer 2

ID不应该重复，使用按钮的类作为一个公共属性。