极客观点
项目管理
HarmonyOS
emmm这仍然是todolist 的部分代码，在网页打开后要删除task的时候点删除没有反应，我在on click事件里面写了console.log()也没有反应
在只先定义$delete_task后在render_task_list()里写$delete_task = $('.action.delete') 的话会报错，显示typeerror , delete_task undefined
目前全部的代码在这里链接描述
这个是html的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Todo App</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/base1.css">
</head>
<body>
<div class="container"><!-- 总容器开始 -->
<h1>我的ToDo</h1>
<form class="add-task">
<input name="content"
type="text"
placeholder="e.g. 下午记得买菜"
autofocus
autocomplete="off"
>
<button type="submit" class="submit-task">submit</button>
</form>
<div class="tasks-list"><!-- 清单列表开始 -->
<!-- <div class="task-item"> -->
<!-- <span><input type="checkbox"></span> -->
<!-- <span class="task-content">item content 1</span> -->
<!-- <span>delete</span> -->
<!-- <span>detail</span> -->
<!-- </div> -->
</div> <!-- 清单列表结束 -->
<div class="task-detail-mask"></div>
<div class="task-detail"><!-- 任务详情开始 -->
<div class="content"><!-- 任务标题开始 -->
下午记得买菜
</div> <!-- 任务标题结束 -->
<div><!-- 任务描述开始 -->
<div class="desc">
<textarea id=""></textarea>
</div>
</div><!-- 任务描述结束 -->
<div class="remaind"><!--任务定时提醒开始-->
<input type="date">
<!-- <button type="submit">submit</button> -->
</div><!-- 任务定时提醒结束 -->
</div><!-- 任务详情结束 -->
</div><!-- 总容器结束 -->
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="node_modules/store/store.js"></script>
<script type="text/javascript" src="js/jsbase.js"></script>
</body>
</html>JS代码
;(function () {
'use strict';
var $submit_task = $('.submit-task')
, $delete_task = $('.action.delete')
, task_list =[]
;
init();
$submit_task.on('click',function(e){
var new_task = {};
// 禁用默认行为
e.preventDefault();
// 获取新task的值
var $input = $(this).prev(find('input[name=content]'));
new_task.content= $input.val();
// 如果新task的值为空 则直接返回 否则继续执行
if(!new_task.content) return ;
// 存入新task
if(add_task(new_task)){
// render_task_list();
$input.val(null);
}
})
$delete_task.on('click',function(){
console.log('1',1);
var $this = $(this);
var $item = $this.parent().parent();
console.log('$item.data(index)',$item.data('index'));
})
function add_task(new_task){
//将新task推入tasklist
task_list.push(new_task);
// 更新localStorage
refresh_task_list();
return true;
}
/*刷新localStorage数据并渲染tpl*/
function refresh_task_list(){
store.set('task_list',task_list);
render_task_list();
}
function delete_task(index){
// 如果没有index或者Index不存在，则直接返回
if(!index|| !task_list[index]) return ;
delete task_list[index];
// 更新localStorage
refresh_task_list();
}
function init(){
task_list = store.get('.task-list')||[];
if(task_list.length)
render_task_list();
}
function render_task_list(){
var $task_list= $('.tasks-list');
$task_list.html('');
for( var i = 0 ; i < task_list.length ; i++)
{
var $task = render_task_item(task_list[i],i);
$task_list.append($task);
}
}
function render_task_item(data,index){
var list_item_item =
'<div class="task-item" data-index="' + index +'">'+
'<span><input type="checkbox"></span>'+
'<span class="task-content">'+data.content+'</span>'+
'<span class="fr">'+
'<span class="action delete"> 删除</span>'+
'<span class="action"> 详细</span>'+
'</span>'+
'</div>';
return $(list_item_item);
}
})();
$delete_task赋值完以后就console下，看看拿到封装对象了没有。另外检查下你代码里的变量名吧，写的$delete_task报错是delete_task，最好统一下命名风格，不要求好看，别出错就行。
明白是哪的问题了。你所有的action类、也就是tasks-list里的每一条都是动态添加的，也就是说，在你缓存
.action这个jq对象的时候，并没有包住相应的DOM对象，相当于你的事件回调没有关联到任何一个DOM上，也就没法被触发了。一般这种动态DOM回调事件的解决办法有两种：一是把事件回调封到一个function里，然后在相应的标签上用
on~触发，但你这个既然是封到匿名包里肯定就不能这么写了；还有一种是用事件代理，就是先把事件绑定到已经存在的那个公有父元素里（就是tasks-list），然后给.on()增加第二参数".action"，这样每次触发事件是在父元素上之后，jq会帮你判断event.target是不是.action，是则触发回调，这样就不受动态添加的限制了。