javascript - 为什么没有添加eventListener？

Question

我在待办事项列表中有代码，可以添加和删除任务。我正在尝试实现代码来在通过双击添加任务后编辑任务。现在，代码应该在双击 LI 元素后登录到控制台，但它没有执行任何操作。

newTodoInput.addEventListener('keyup', function addTodoController(event){
    if ( event.keyCode === 13){
        if ( newTodoInput.value !== '' ){
            var newTask = todos.addTaskToList(newTodoInput.value.trim(), todos.taskList);
            var clone = templateContent.cloneNode(true);
            clone.querySelector("label").appendChild(document.createTextNode(newTodoInput.value.trim()));
            todoList.appendChild(clone);
            newTodoInput.value = '';
            deletingTasks();
            editingTasks();
        }
    }
}); // END addEventListener(addTodoController)
function deletingTasks() {
    var deleteTaskButtons = document.querySelectorAll('button.destroy');
    _.last(deleteTaskButtons).addEventListener('click', function removeLi(){
        //console.log(event.target.parentNode.parentNode.parentNode);
        event.target.parentNode.parentNode.parentNode.removeChild(event.target.parentNode.parentNode);
        todos.deleteTask(_.indexOf(deleteTaskButtons, event.target), todos.taskList);
    });
}

function editingTasks(){
    var editTask = document.querySelectorAll('li');
    _.last(editTask).addEventListener('dblclick', function taskEdit(){
        console.log("Edit this task!");
    });
}

每次添加任务时，我都会调用 EditingTasks 函数，就像我在删除任务函数中所做的那样，以便事件监听器将在添加时添加到每个 li 元素，但我没有得到任何内容。有任何指示说明为什么此代码不起作用吗？如果需要的话，这是 HTML:

<ul class="todo-list">
                <!-- These are here just to show the structure of the list items -->
                <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
                <template id='newtasktemplate'>
                    <li>
                        <div class="view">
                            <input class="toggle" type="checkbox">
                            <label class="tasking"></label>
                            <button class="destroy"></button>
                        </div>
                        <input class="edit" value="Rule the web">
                    </li>
                </template>
            </ul>

Answer 1

您的代码可能会执行以下操作:

var editTask = document.querySelectorAll('li');
_.last(deleteTaskButtons).addEventListener(...)

可能没有选择正确的<li>标签。我的建议是更改您的模板以将唯一的类名添加到 <li>标签如下:

<li class="myListItem">

然后将代码更改为:

var editTask = document.querySelectorAll('.myListItem');
_.last(deleteTaskButtons).addEventListener(...)