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>

//This is the logic that creates a new button by cloning the cards and then applying an event listener that moves it to the finished column upon clicking

createNew () {
    const newClnIds = [];
    const newItem = document.getElementById('active').querySelector('li');
    const cln = newItem.cloneNode(true);
    cln.id = "p" + (document.querySelectorAll("#active > li").length + 1);
    let clnId = cln.id;
    document.getElementById('active').appendChild(cln);
    
        
    //Selects the Finish Button in the New Cloned Element and adds eventlistener to move it to the finished projects column when clicked.

    const clnButton = cln.querySelector('button:last-of-type');
    clnButton.addEventListener("click",function() {DOMHelper.moveElement(cln.id,"#finished-projects ul");

//This is the function that switches the button from 'Finished' to 'Active'. Pressing 'Finished' moves the card to the 'Active' column and pressing 'Actvive' Button moves it to finished. My new elements will not have the button switch types when pressed to move columns. 

connectSwitchButton(type) {
    const projectItemElement = document.getElementById(this.id);
    let switchBtn = projectItemElement.querySelector('button:last-of-type');
    switchBtn = DOMHelper.clearEventListeners(switchBtn);

    
   
    switchBtn.textContent = type === 'active' ? 'Finish' : 'Activate';
    switchBtn.addEventListener(
      'click',this.updateProjectListsHandler.bind(null,this.id)
    );
  }

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

解决方法

在处理您的代码后，我发现它确实将处理程序绑定到新创建的项目。问题是列表中的第一项没有绑定任何处理程序。有人建议事件委派，这肯定是可能的。另一个想法是使初始列表为空，并将克隆的列表项保留在内存中。您可能有一个函数createListItem()，该函数只返回一个新列表项，然后将其追加到列表中。

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

function createNew() {
  //  get first li from DOM
  const newItem = document.getElementById('active').querySelector('li');

  //  deep clone this element
  const cln = newItem.cloneNode(true);

  //  give clone a new id
  cln.id = "p" + (document.querySelectorAll("#active > li").length + 1);

  // append clone to end of list
  document.getElementById('active').appendChild(cln);

  //Selects the Finish Button in the New Cloned Element and adds eventlistener to move it to the finished projects column when clicked.
  const clnButton = cln.querySelector('button:last-of-type');

  clnButton.addEventListener("click",function() {
    //DOMHelper.moveElement(cln.id,"#finished-projects ul");
    alert('click on finish button for list:' + cln.id);
  });
}


createNewButton.onclick = createNew;

h2 {
  margin: 0;
}

ul {
  padding: 0;
}

li {
  background: antiquewhite;
  list-style: none;
  padding: 10px;
  margin: 5px;
  border: dotted 1px grey;
}

<section id="active-projects">
  <header>
    <h2>Active Projects</h2>
  </header>
  <button id="createNewButton">create new</button>
  <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>
  </ul>
</section>

几天前我遇到了这个确切的问题（JS - Inserting row with button works,button does not）

对我来说，问题是当添加新项时，已经运行了添加事件侦听器的功能。解决方案是将事件侦听器定位到静态父级。

最初是这样的：

已解决：

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

在这种情况下，acc_table是静态父级，并且具有给定类的所有子级都对其应用了代码。

有关更多信息，请查找事件委托。

html javascript reload reload