如何检索在 jquery 中创建的 html 元素的 html 元素 ID？

Question

In common retrieve data, the html was actually store in the html file, but in my case, I create the html element inside the jquery, then how did I call out the div id?

如何替换 document.getElementByID ("edit").innerHTML=.... 元素 id 实际上不在 html 内，而是在 jquery 内。

我在内部 HTML 中创建的表只是 header，即 (USER,EMAIL,USERTYPE,EDIT,DELETE)。 所有数据实际上都是从（用户检索到用户类型实际上是从 firebase 检索到的。然后我尝试在其中添加编辑和删除按钮。代码如下所示：

\\Code that use to create table and the data is retrieve from firebase
firebase.database().ref("users").orderByKey().once("value").then(function (snapshot) {
             var counter = 0;
        snapshot.forEach(function(childSnapshot) {
            counter+=1;
            var user = childSnapshot.ref.getKey();
            var email = childSnapshot.child("email").val();
            var usertype = childSnapshot.child("usertype").val();
            //the edit was I trying to change the div 'id' into the specific user that get from firebase by row of data and use it as unique id to call the data into the form.

             var edit = user;
             $(".edit").attr("id",edit);
                    
   
        $("#table_body1").append('<tr><td>' + counter  +'</td> <td>' + user  +'</td> <td>' + email +'</td> <td>' + usertype   +'</td> <td>' + `<div class="Edit" name="edit" onclick="div_show()"><img src = "edit.png"></div>`+'</td> <td>' + `<div class="Edit" name="delete" onclick="delete_show()"><img src = "delete.png"></div>` + '</td> </tr>');           
      });                

});


function div_show() {
document.getElementById('abc').style.display = "block";

              var  user= document.getElementsById("edit");

      var firebase = firebase.database().ref('users/'+user).once('value').then(function (snapshot){     
                    var email = snapshot.val().email;
                    var usertype = snapshot.val().usertype;
                    document.getElementById("email").innerHTML=email;
                    document.getElementById("usertype").innerHTML=userType;
                    
                })
            }

HTML 代码：

<div id="abc">
    <!-- Popup Div Starts Here -->
<div id="popupContact">
    <!-- Contact Us Form -->
<form action="#" id="form" method="post" name="form">
<img id="close" src="images/3.png" onclick ="div_hide()">
<h2 >Edit</h2>
<hr>
<input id="userID" name="UserID" placeholder="User = user1" type="text">
<input id="email" name="email" placeholder="Email = timmyscottmy@gmail.com" type="text">
<input id="userType" name="usertype" placeholder="User type = lecturer" type="text">
<a href="javascript:%20check_empty()" id="update">Update</a>
<a href="javascript:%20check_empty()" id="cancel" onclick ="div_hide()">Cancel</a>
</form>
</div>

Answer 1

不建议使用内联事件处理程序 - 特别是当您在 jQuery 中有非常简单的事件委托时。 要编辑/删除一行，你会做

$("#table_body1").on("click",".edit",function() { div_show(this.dataset.user) }); // pass something that identifies the row 
$("#table_body1").on("click",".delete",function() { $(this).closest("tr").remove() }) 

您添加的按钮在哪里有class="delete"

$("#table_body1").append(
  `<tr>
    <td>${counter}</td>
    <td>${user}</td> 
    <td>${email}</td> 
    <td>${usertype}</td> 
    <td class="edit" data-user="${user}"><img src="edit.png"></td> 
    <td class="delete"><img src="delete.png"></td> 
  </tr>`);