Как добавить прослушиватели событий в динамически создаваемые элементы списка HTML?

Question

Я пытаюсь создать приложение списка дел, в котором при нажатии элемент списка переключается на класс checked, который добавляет зачеркнутый стиль. У меня проблемы с таргетингом на один элемент списка за раз, и я не проверяю весь список. Как я могу динамически добавлять прослушиватели событий для каждого элемента? В настоящее время с помощью приведенного ниже кода добавленные элементы уже проверены, и я не могу понять, почему.

My HTML выглядит следующим образом:

<div id="body">
            <form id="form" onsubmit="newElement()" target="_self">
                <input type="text" id="task" placeholder="What's on the agenda?">
            </form>

            <ul id="list">
                <li class = "checked">test</li >
            </ul>
        </div>

Моя функция захватывает данные из текстового поля через эту функцию

function newElement() {
    event.preventDefault(); // stop default redirect

    /* create a list item and put the inputted text within */
    var li = document.createElement("li"); // create a list item
    var inputValue = document.getElementById("task").value; // value of text box
    var t = document.createTextNode(inputValue); // create a text node of the box value
    li.appendChild(t); // put the text node in the li
    li.addEventListener('click', checkToggle(li)); // add event listener for a click to toggle
                                                   // a strikethrough

    /* append the li item to the ul */
    appendItem("list", li); 
}

, а затем функция checkToggle выглядит следующим образом

/* make items get checked when clicked */
function checkToggle(li) {
    li.classList.toggle("checked");
}

Однако, когда страница загружена, каждый элемент автоматически проверяется, когда он уже добавлен .

Answer 1

Вы выполняете функцию - checkToggle(li)

Вы должны прикрепить функцию как addEventListener('click', checkToggle) без скобок

function newElement() {
event.preventDefault(); // stop default redirect

/* create a list item and put the inputted text within */
var li = document.createElement("li"); // create a list item
var inputValue = document.getElementById("task").value; // value of text box
var t = document.createTextNode(inputValue); // create a text node of the box value
li.appendChild(t); // put the text node in the li
li.addEventListener('click', checkToggle); // add event listener for a click to toggle
                                               // a strikethrough

/* append the li item to the ul */
document.querySelector("ul").appendChild(li);
}

function checkToggle() {
this.classList.toggle("checked");
}

.checked{color: blue;}

<div id="body">
        <form id="form" onsubmit="newElement()" target="_self">
            <input type="text" id="task" placeholder="What's on the agenda?">
        </form>

        <ul id="list">
            <li class = "checked">test</li >
        </ul>
    </div>