Javascript 事件委派后表格不起作用

我有一个表单，它动态地将文本附加到HTML中的无序列表中，并带有一个标记为“已完成”的复选框。我可以添加多个任务，将它们标记为已完成，但在标记任何复选框后无法继续。控制台记录以下错误：

未捕获类型错误：字符串不是函数

我不确定这个错误意味着什么，因为我只能在选中复选框之前继续添加列表项

// all jquery dom actions can only be called inside document ready.

function toDoList() {
    this.list = [];
}

function task(description) {
    this.description = description;
    this.completed = false;
}

toDoList.prototype.add = function (todo) {
    this.list.push(todo)
}

toDoList.prototype.complete = function (todo) {
    for (task in this.list) {
        if (this.list[task].description === todo) {
            this.list[task].completed = true
            console.log("Woot! You've completed: " + todo)
        } else {
            console.log("Couldn't find that task!")
        }
    }

}

var myList = new toDoList();
$(document).ready(function () {

    $("#todoform").on("submit", function (e) {
        e.preventDefault();
        var taskDescription = $("#todo").val()
        var myTask = new task(taskDescription)
        myList.add(myTask)
        $("#printout ul").append("<li class=\"task\"><input type=\"checkbox\">" + myTask.description + "</li>")
        $('#todo').val('');
        console.log(myList)
    });

    $('ul').delegate('.task', 'change', function () {
        if (!this.checked) {
            $(this).toggleClass("completed")
            var task = $(this).text()
            myList.complete(task)
            console.log(myList)
        }
    });

});

//所有jquery dom操作只能在document ready内部调用。
函数toDoList（）{
this.list=[]；
}
功能任务（说明）{
this.description=描述；
this.completed=false；
}
toDoList.prototype.add=函数（todo）{
此.list.push（todo）
}
toDoList.prototype.complete=函数（todo）{
用于（此.list中的任务）{
if（this.list[task].description==todo）{
此.list[task].completed=true
log（“呜！你已经完成了：+todo”）
}否则{
log（“找不到该任务！”）
}
}
}
var myList=newtodolist（）；
$（文档）.ready（函数（）{
$（“#todoform”）。关于（“提交”，函数（e）{
e、 预防默认值（）；
var tasksdescription=$（“#todo”）.val（）
var myTask=新任务（任务描述）
myList.add（myTask）
$（“#打印输出ul”）.append（“
“+myTask.description+”
”）
$（'todo'）.val（''）；
console.log（myList）
});
$（'ul'）.delegate（'.task'，'change'，function（）{
如果（！this.checked）{
$（此）.toggleClass（“已完成”）
var task=$（this.text（））
myList.complete（任务）
console.log（myList）
}
});
});

---

您可以查看我的JSFIDLE:

这是因为

complete

处理程序中的

for

循环，您使用了对

task

的全局引用作为循环变量，它作为字符串重写全局

task

（函数）。然后，当您说

newtask（）

时，

task

是一个字符串，而不是导致错误的函数

uncaughttypeerror:string不是函数

因此，将

任务

变量设置为本地变量

for (var task in this.list) {}

演示

//所有jquery dom操作只能在document ready内部调用。
函数ToDoList（）{
this.list=[]；
}
功能任务（说明）{
this.description=描述；
this.completed=false；
}
ToDoList.prototype.add=函数（todo）{
此.list.push（todo）
}
ToDoList.prototype.complete=函数（todo）{
for（此.list中的var任务）{
if（this.list[task].description==todo）{
此.list[task].completed=true
log（“呜！你已经完成了：+todo”）
}否则{
log（“找不到该任务！”）
}
}
}
var myList=newtodolist（）；
$（文档）.ready（函数（）{
$（“#todoform”）。关于（“提交”，函数（e）{
e、 预防默认值（）；
var tasksdescription=$（“#todo”）.val（）
var myTask=新任务（任务描述）
myList.add（myTask）
$（“#打印输出ul”）.append（“
“+myTask.description+”
”）
$（'todo'）.val（''）；
console.log（myList）
});
$（'ul'）.delegate（'.task'，'change'，function（）{
如果（！this.checked）{
$（此）.toggleClass（“已完成”）
var task=$（this.text（））
myList.complete（任务）
console.log（myList）
}
});
});
正文{
背景色：#D1D1
}
#todoform{
保证金：5em自动0自动；
宽度：20%；
}
#打印输出{
宽度：800px；
最小高度：1000px；
背景色：白色；
保证金：1em自动0自动；
颜色：黑色；
文本缩进：1em；
}
#打印输出p{
字号：2em；
}
#打印输出p:n子项（偶数）{
背景色：#d1d1；
}
.完成{
文字装饰：线条贯通；
}
#任务{
线型类型：无；
}


请将代码粘贴到眼睛上！谢谢你，阿伦！