如何在js中处理动态创建的元素中的事件

Question

我想动态地将点击事件添加到创建的元素中，当用户点击按钮时创建一些元素（在下面的代码中显示的元素）和当用户点击名为remov的元素时必须运行名为deltion的函数但是不起作用。我该如何实现？

我使用 Vue js

methods: {
        showinfo: function() {
            db.collection("Studnets")
                .get()
                .then(function(querySnapshot) {
                    querySnapshot.forEach(function(doc) {
const student = document.createElement("tr");
const email = document.createElement("td");
email.innerText = doc.data().email;

const name = document.createElement("td");
name.innerText = doc.data().name;

const phone = document.createElement("td");
phone.innerText = doc.data().phone;

const stage = document.createElement("td");
stage.innerText = doc.data().stage;

const remov = document.createElement("button");
const pic = document.createElement("img");
pic.setAttribute("src","/dist/delete.svg?afdf9975229cdc15458e851b478bb6cb");
remov.classList.add("del");

//the problem
remov.addEventListener("click", this.deltion());

student.appendChild(email);
student.appendChild(name);
student.appendChild(phone);
student.appendChild(stage);
student.appendChild(remov);
remov.appendChild(pic);
document.getElementById("studentList").appendChild(student);
},

  deltion: function(e) {
         const rawStudent = e.target;
         const raw = rawStudent.parentElement;
         console.log(raw);
         raw.remove();
     }

Answer 1

您的代码存在三个问题。

第一个问题：在事件监听器上调用函数

您在注册事件侦听器时正在调用 deltion（也许您的意思是删除 :P）函数。

remov.addEventListener("click", this.deltion());

正确的形式是

remov.addEventListener("click", this.deltion);

因为你想将函数体传递给事件监听器，而不是函数结果。 （如果你想调用它，你可以将函数包装在一个箭头函数中，但最后是一样的）。

第二期：这不是这

如果你修复了第一个，你会找到另一个（程序员的生活）。 this是js中的一个特殊关键字，this的上下文会根据调用者的不同而变化。

1. showinfo 被称为 this 关键字是指组件实例。
2. db.collection("Studnets").get().then(function(querySnapshot) {}) promise 被调用，并且在解析时它将调用具有 querySnapshot 参数的函数。 **this** 关键字上下文更改。
3. 您使用 foreach querySnapshot.forEach(function(doc) {}) **this** 关键字上下文再次更改了集合。

一个解决方案是使用箭头函数，这样它就不会绑定到父函数。

db.collection("Studnets").get().then(querySnapshot => {
    querySnapshot.data.forEach(doc => { 
        // code
    })
}) 

如果由于某种原因您不能使用箭头函数，您可以在 showinfo 函数上添加一个“隐藏”this 关键字上下文的变量。

showinfo() {
    const vm = this;
    api.getStudentsCollection().then(function(querySnapshot) {
      querySnapshot.data.forEach(function(doc) {
        // setup code
        remov.addEventListener("click", vm.deltion);
        // setup code
      });
    });
}

第三题：点击箭头图片会删除按钮，但不会删除tr 使用 currentTarget 代替 target，target 是用户点击的元素，可以是按钮内的任何元素，比如图片，currentTarget 是事件监听器附加的元素，也就是按钮。

{
    deltion: function(e) {
        const rawStudent = e.currentTarget;
        const raw = rawStudent.parentElement;
        console.log(raw);
        raw.remove();
    }
}

不请自来的建议

Vue 以其简单性和声明性代码而著称。您可以像原始代码一样解决问题，但有一种更简单的方法让组件管理其状态。

我用固定的原始版本和最简单的 vue 方式（使用简单的空和加载状态切换）复制了您的代码。希望你觉得它有用并从中学习。 :) https://codesandbox.io/s/student-list-ammar-yasir-b5sxo?file=/src/App.vue

学习参考

• https://javascript.info/
• https://dev.to/cilvako/this-keyword-in-javascript-an-explanation-1con