44、构建待办事项列表应用及jQuery实用技巧

构建待办事项列表应用及jQuery实用技巧

构建待办事项列表应用

待办事项列表应用是一个常见且实用的Web应用，下面将详细介绍如何构建一个具备添加、移动和删除任务功能的待办事项列表应用，并探讨一些可以进一步改进该应用的方法。

基本功能实现

1. 保存并预览文件 ：保存 index.html 和 todo.js 文件，然后在Web浏览器中预览 index.html 文件。添加大量任务，并在两个列表之间拖动任务，通过将任务从“待办”列表拖动到“已完成”列表，即可将其标记为已完成。
2. 添加删除任务功能
   • 编写事件委托代码 ：在 sortable() 函数的代码之后，但仍在 $(document).ready() 函数内部，添加以下代码：

$('.sortlist').on('click', '.delete', function() {

});

这里使用了事件委托，因为页面加载时还没有列表项和删除按钮。 $('.sortlist') 选择页面上的两个无序列表， on() 方法让jQuery监听所有带有 delete