时间戳

首页 > 解决方案 > 如何在我的 JS 中的 eventListener 之前加载我的生成 dom 函数

javascript - 如何在我的 JS 中的 eventListener 之前加载我的生成 dom 函数

问题描述

在此处输入图像描述

我想修复 null 的无法读取属性“addEventListener”，我想我必须找到一种方法在 eventListener 之前在我的 js 中加载函数，因为我的 html 中没有那个部分，msgtitle 没有存在（它只在另一个 eventListener 之后加载）。

const generateDiscution = (username, userID) => {
  let html = `<div class="msg-box" style="" rel="${userID}"><div class="msg-title">${username}<div class="close" >x</div> </div>`;
  html += `<div class="msg-wrap">
  <ul class="chat-list">
  </ul>
  <div class="msg-push"></div>`;
  html += `</div><form class="chat-input" style"" onsubmit="return false;"><input  class="message" type="text" autocomplete="on" placeholder="Ecrire votre message ..." />`;
  html += `<button class="submit">Envoyer</button></form></div></div></div>`;
  box.innerHTML += html;
};

// x closing

msgtitle.addEventListener('click', e => {
  e.preventDefault();
  if (chatform.style.display === 'none' && msgwrap.style.display === 'none') {
    chatform.style.display = 'block';
    msgwrap.style.display = 'block';
  } else {
    chatform.style.display = 'none';
    msgwrap.style.display = 'none';
  }
});


Array.from(discuElemt).forEach(elm => {
  elm.addEventListener('click', e => {
    const username = e.target.textContent;
    const userID = e.target.getAttribute('id');
    console.log(username);
    generateDiscution(username, userID);
    e.preventDefault();
  });
});

标签： javascriptdomloadingevent-listener

解决方案

这是一个概念问题，您正在尝试将事件添加到不存在的元素…… preventDefault() 在这种情况下没有帮助。使用动态元素创建时，您需要在元素创建时附加事件，例如：

function createHelloButton(){

    const buttonElement = document.createElement('button');
    buttonElement.textContent = "Click Here"

    buttonElement.addEventListener('click', function (event) {
        alert('Hello world');
});
    document.body.appendChild(buttonElement);
}

推荐阅读