Question

我已经写了一份基本的＆＃34;待办事项清单＆＃34;基于Treehouse的课程，使用DOM API在纯JavaScript中进行应用程序。用户应该能够将任务添加到无序列表，编辑该任务的名称，将其关闭为完成（或取消选中它不完整），或者完全删除它。

纯JavaScript版本可以正常工作;我试图通过使用它重新编写这个应用程序来更熟悉jQuery，但我正在寻找帮助将复选框和其他按钮绑定到各自的功能。

JavaScript版本 - http://codepen.io/Llanyewe7/pen/bedjXv

jQuery版本 - http://codepen.io/Llanyewe7/pen/MewBNL

到目前为止，只有＆＃34;添加＆＃34;由addTask()函数控制的按钮正在按预期工作;我的复选框，以及＆＃34;编辑＆＃34;和＆＃34;删除＆＃34;按钮，似乎不起作用。 Chrome中的开发人员工具和JavaScript控制台无法识别任何代码错误;我怎样才能有效地将事件绑定到他们的＆＃34;后端＆＃34; jQuery中的函数来解决我的问题？

Answer 1

我没有看到任何绑定复选框的代码，编辑和删除列表中新添加项目的事件。可以尝试这样做：

var createNewTaskItem = function() {

    var newTask = $taskInput.val();

    var $listItem = $("<li></li>");
    var $checkBox = $("<input></input>").attr("type", "checkbox");
    var $label = $("<label></label>").text(newTask);
    var $editInput = $("<input></input>").attr("type", "text");
    var $editButton = $("<button></button>").text("Edit").addClass("edit");
    var $deleteButton = $("<button></button>").text("Delete").addClass("delete");


    var $newTaskItem = $listItem.append($checkBox).append($label).append($editInput).append($editButton).append($deleteButton);

    //BIND THE EVENTS TO THE NEW TASK ITEM HERE
    bindTaskEvents($newTaskItem, taskCompleted);

    return $newTaskItem;

};

查看新添加的行会将事件绑定到新的列表项。我测试了它，复选框（仅检查事件），编辑事件和删除事件正在被正确触发。复选框取消选中事件似乎存在一些问题。但我想你可以从那里弄明白。

享受：）

在jQuery

1 个答案: