Слушатель событий не работает после добавления нового элемента - PullRequest
Новая
       26

Слушатель событий не работает после добавления нового элемента

0 голосов
/ 31 мая 2018

По сути, у меня есть текстовое поле, в котором я пишу какой-то текст, нажимаю «Добавить пост», и новый пост будет добавляться к списку других постов (аналогично Twitter).У каждого из этих постов есть кнопка «удалить».

На данный момент, когда я нажимаю «Удалить» на каждом посте, у меня есть console.log, который просто говорит «ТЕСТ».И это прекрасно работает.Однако после того, как я добавляю сообщение, то есть добавляется новый элемент, прослушиватель событий перестает работать даже для существующих кнопок «Удалить» (а не только для недавно добавленного).

Вот как янаписал прослушиватель событий для удаления. 

for(var i = 0; i < deleteDOM.length; i++) {
   deleteDOM[i].addEventListener("click", deleteEntryCont);
}

... Где deleteEntryCont - это просто функция, которая на данный момент консоль регистрирует "ТЕСТ".

deleteDOM - переменная дляdocument.getElementsByClassName("delete") и является просто списком узлов.

Вот часть, где добавляется новый 'post': 

entryList.forEach(function(entry) {

        var entryItemDOM = document.createElement("li");
        var entryTextDOM = document.createElement("p");
        var metaWrapperDOM = document.createElement("div");
        var timeStampDOM = document.createElement("span");
        var deleteDOM = document.createElement("span");

        // Create entry wrapper & class names
        entryItemDOM.className = "entry";
        entryItemDOM.className += ` ${entry.mood}-entry`;
        entryItemDOM.id = entry.id;

        // Insert entry at the top of the stack
        domEl.entriesDOM.insertBefore(entryItemDOM, domEl.entriesDOM.firstChild);

        entryItemDOM.appendChild(entryTextDOM);
        entryTextDOM.innerHTML = entry.text;

        entryItemDOM.appendChild(metaWrapperDOM);
        metaWrapperDOM.className = "overflow-hidden";

        metaWrapperDOM.appendChild(timeStampDOM);
        timeStampDOM.className = "timestamp";
        timeStampDOM.innerHTML = entry.timeStamp;

        metaWrapperDOM.appendChild(deleteDOM);
        deleteDOM.className = "delete";
        deleteDOM.innerHTML = "Delete";


      });

Где entryList - это массив объектов, которые этот код вышеотображает в HTML.

В чем может быть проблема?

1 Ответ

0 голосов
/ 31 мая 2018

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

metaWrapperDOM.appendChild(deleteDOM);
deleteDOM.className = "delete";
deleteDOM.innerHTML = "Delete";
deleteDOM.addEventListener('click', deleteEntryCont);
...