Как обрабатывать события в динамически создаваемых элементах в js - PullRequest
Новая
       61

Как обрабатывать события в динамически создаваемых элементах в js

0 голосов
/ 14 июля 2020

Я хочу динамически добавить событие щелчка к созданному элементу, чтобы при нажатии пользователем кнопки создавались некоторые элементы (элементы, которые показаны в приведенном ниже коде), а , когда пользователь щелкает элемент с именем удаления, должен запускать функцию с именем 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();
     }

1 Ответ

0 голосов
/ 14 июля 2020

В вашем коде есть три проблемы.

Первая проблема: вызов функции в прослушивателе событий

вы вызываете deltion (возможно, вы имеете в виду удаление: P), когда вы регистрируете прослушиватель событий. 

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

правильная форма: 

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

Поскольку вы хотите передать тело функции прослушивателю событий, а не результат функции. (вы можете заключить функцию в стрелочную функцию, если хотите ее вызвать, но в конце будет то же самое).

Вторая проблема: это не это

Если исправишь первую, найдешь другую (жизнь программистов). this - специальное ключевое слово в js, контекст this будет меняться в зависимости от вызывающего.

  1. showinfo is ключевое слово this относится к экземпляру компонента.
  2. db.collection ("Studnets"). get (). then (function (querySnapshot) {}) вызывается обещание, и при разрешении он вызовет функцию с параметром querySnapshot. **this** контекст ключевого слова изменяется.
  3. вы повторяете коллекцию с помощью foreach querySnapshot.forEach (function (do c) {}) **this** контекст ключевого слова снова изменяется.

Решением будет использование стрелочных функций, чтобы они не были связаны с родительской функцией. 

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

Если по какой-то причине вы не можете использовать стрелочные функции, вы можете добавить переменную, которая " shadows "контекст ключевого слова this в функции showinfo. 

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

Unsolicited Совет

Vue отличается простотой и декларативным кодом. Вы можете решить проблему так же, как и исходный код, но есть более простой способ , чтобы позволить компоненту управлять своим состоянием .

Я реплицировал ваш код с исправленной исходной версией и простейшим vue способ (с простым переключением пустого состояния и состояния загрузки). Надеюсь, вы найдете это полезным и извлечете уроки из этого. :) https://codesandbox.io/s/student-list-ammar-yasir-b5sxo?file= / src / App. vue

Учебные ссылки

...