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

ID绝不可重复，而应将按钮的类用作常见属性。

Answer 2

您绑定到所有元素，并且您正在复制ID。 ID是单数。

最好单独绑定一个按钮，或者使用具有数据属性的事件委托。

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);
});

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

2 个答案: