Question

我在todo列表中有代码，可以添加和删除任务。我试图通过双击添加代码来编辑任务。现在，代码应该只需在双击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(...)

为什么没有添加eventListener？

1 个答案: