JavaScript已经解析了…有没有办法重新运行/解析我的代码？

我创建了一个用于跟踪日常任务的页面。按下按钮并创建新任务。在这些新任务中，我编写的代码都不适用于它们，因为它似乎只适用于已经存在的任务

有没有办法重新分析/重新运行代码，使其能够识别新创建的元素并允许它们正常工作

//This is the card that represents a task..'Finish' button is what I am having the issues with.
<section id="active-projects">
      <header>
        <h2>Active Projects</h2>
      </header>
      <ul id = 'active'>
        <li
          id="p1"
          data-extra-info="Got lifetime access, but would be nice to finish it soon!"
          class="card"
        >
          <h2>Finish the Course</h2>
          <p>Finish the course within the next two weeks.</p>
          <button class="alt">More Info</button>
          <button>Finish</button>
        </li>

---

我几天前就有过这个问题（）

对于我来说，问题是添加新项时，添加eventlisteners的函数已经运行。解决方案将事件侦听器定向到静态父级

原来是这样的:

$('.edit_account').on('click', function(e){...}

修正了它：

$('.acc_table').on('click', '.edit_account', function (e){

在本例中，acc_表是静态父级，所有具有给定类的子级都应用了代码

---

有关详细信息，请查看事件委派。

在使用了您的代码之后，我发现它确实将处理程序绑定到了新创建的项。问题是列表中的第一项没有绑定任何处理程序。有人建议活动授权，这当然是可能的。另一个想法是让初始列表为空，并将从中克隆的列表项保留在内存中。您可以使用一个函数

createListItem（）

，该函数只返回一个新的列表项，然后将其附加到列表中

因此，您的问题的答案是：您不需要重新解析Javascript。您可以简单地创建新元素，将它们附加到DOM，然后将事件处理程序附加到它们，事实上，这似乎就是您已经在做的事情

函数createNew（）{
//从DOM获得第一个li
const newItem=document.getElementById（'active'）.querySelector（'li'）；
//深度克隆此元素
const cln=newItem.cloneNode（true）；
//给克隆一个新id
cln.id=“p”+（document.queryselectoral（“#active>li”）。长度+1）；
//将克隆附加到列表末尾
document.getElementById（'active'）.appendChild（cln）；
//在新克隆元素中选择Finish按钮，并添加eventlistener，以便在单击时将其移动到finished projects列。
const clnButton=cln.querySelector（'按钮：类型的最后一个'）；
addEventListener（“单击”，函数（）{
//DOMHelper.moveElement（cln.id，#finished projects ul”）；
警报（'单击列表的完成按钮：'+cln.id）；
});
}
createNewButton.onclick=createNew
h2{
保证金：0；
}
保险商实验室{
填充：0；
}
李{
背景：古色白；
列表样式：无；
填充：10px；
保证金：5px；
边框：点状1px灰色；
}

活动项目
创造新的


完成课程
在接下来的两周内完成课程

更多信息
完成


首先，不要解释你的代码是做什么的，而是始终发布你在问题中询问的所有相关代码，因为有很多方法可以编写符合你解释的代码。但是，一般来说，如果您的代码是在函数中编写的，则只需在需要时重新调用函数即可。您可能会遇到事件处理程序无法处理新创建的元素的问题。您正在寻找的解决方案称为“事件委派”。我觉得这个
this.updateProjectListsHandler.bind（null，this.id）
有点奇怪。为什么要将方法绑定为null？通常情况下，我希望它绑定到
this
。这里需要注意的是：如果您将事件侦听器绑定到父元素，您就不必为新元素添加新的侦听器，或者在删除元素时删除侦听器。只需将一个单击侦听器绑定到父元素一次，那么事件冒泡将把对子元素的所有单击传递给父元素。检查
event.target
以确定实际点击的是什么，如果是按钮或其他您关心的元素，请做出反应，忽略其余部分。您可以使用与此处相同的方法将事件绑定到#active元素，只需一次（是的，在构造函数中，如果合适的话，它会在元素存在后绑定）。然后在事件处理程序中，每当用户单击该元素中的任何一个东西时，您都会得到事件发射。您可以检查
event.target
是否有类“alt”，如果这是您想要锁定的按钮，或者其他按钮（在其上放置一个类，以便您可以区分它）。我建议使用更具描述性的类名，甚至是一个数据属性。如果
event.target
没有该类，请忽略该事件。这可能是OP存在的问题，但没有提到jQuery。这几乎正是我在问题中试图解释的。我将查看您发布的内容，但我认为我找不到他回答了。@MattLaszcz想法是在
文档
或
上放置一个事件处理程序，查找冒泡事件，然后检查事件目标是否是您关心的元素之一。如果是，则运行处理程序代码。是的。每次“单击”事件（或任何类型的事件）都会“冒泡”一直到DOM的顶部。检查点击是否是感兴趣的项目既简单又便宜。上面的答案利用了内置的jQuery功能，这对您很有用。我同意帖子中提到了校外的jQuery，但是，这在技术上是最好的解决方案和一般建议——在家长身上使用一个监听器，然后就可以了不管添加或删除了多少内容。+1，尽管@schinken82在这里需要注意，但在回答问题时尽量不要使用jQuery，除非你看到它在问题中被使用。我感谢你的建议，但这意味着需要jQuery来做这件事，仅仅为了“得到”这一点就太过分了事件绑定，因为它是从vanilla获得的。是的，这是我最初尝试的，非常感谢！除此之外，我还尝试向其添加一个eventListener
//This is in a Class that is first in my code and is the logic used to move the cards using append.

//receives element ID and a New destination in the DOM and sends the card to that destination Via Append.
  static moveElement(elementId, newDestinationSelector) {
    const element = document.getElementById(elementId);
    const destinationElement = document.querySelector(newDestinationSelector);
    destinationElement.append(element);
    
  }
}

$('.edit_account').on('click', function(e){...}

$('.acc_table').on('click', '.edit_account', function (e){