如何将javascript连接到html代码更新后添加的元素？_Javascript_Dom_Code Injection_Queryselector

如何将javascript连接到html代码更新后添加的元素？

javascript dom

如何将javascript连接到html代码更新后添加的元素？,javascript,dom,code-injection,queryselector,Javascript,Dom,Code Injection,Queryselector,我正在关注domjavascript-netninja系列，我被卡住了，因为在我注入一个'li'元素之后，delete函数就不再工作了。起初我遇到了一个类似的问题，querySelector（）方法不起作用，但它是使用setTimeout（）解决的，您能帮忙吗以下是HTML代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link

我正在关注domjavascript-netninja系列，我被卡住了，因为在我注入一个'li'元素之后，delete函数就不再工作了。起初我遇到了一个类似的问题，querySelector（）方法不起作用，但它是使用setTimeout（）解决的，您能帮忙吗

以下是HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link href="style.css" rel="stylesheet" />
    <script src="cont.js"></script>
    <title>Testing JavaScript</title>
  </head>

  <body>
    <div class="wrapper">
      <header>
        <div id="page-banner">
          <h1 class="title">My Contacts</h1>
          <p>Special List</p>
          <form id="search">
            <input type="text" placeholder="Search Contacts..." />
          </form>
        </div>
      </header>

      <div id="Contact-List">
        <h2 class="title">Contacts</h2>
        <ul>
          <li>
            <span class="contat">Zineb Zrhari</span>
            <span class="delete">delete</span>
          </li>
          <li>
            <span class="contat">Kawter Lebouni</span>
            <span class="delete">delete</span>
          </li>
          <li>
            <span class="contat">Oumayma Touji</span>
            <span class="delete">delete</span>
          </li>
          <li>
            <span class="contat">Rim Essahel</span>
            <span class="delete">delete</span>
          </li>
        </ul>
      </div>
      <form id="add">
        <input type="text" placeholder="Add a Contact..." />
        <button>Add</button>
      </form>
    </div>
  </body>
</html>

谢谢大家!

感谢您发布完整的代码

问题在于JavaScript的这一行：

if(e.target.className == 'delete'){

如果

delete

是应用于元素的唯一类，则这将起作用。但是，您将对新元素应用两个类，这意味着

e.target.className

将变成

delete name

您可以通过将行更改为：

if(e.target.classList.includes('delete')) {

即使元素有多个类，这也会起作用。

为什么需要

setTimeout

？因为当我没有设置时，它根本不起作用。我在本地运行了您的示例，更正了与

deleteBtn.classList.add（“name”）相关的错误

我已经删除了

setTimeout

并且应用程序运行得很好。事实上，我刚刚意识到了这一点，非常感谢你

if(e.target.classList.includes('delete')) {