极客观点
项目管理
HarmonyOS
最近在学js,按照教程做了个todolist，但是在写完点击按钮删除localstorage数据功能后，怎么点击都没有反应，删除不了数据，console里面没有报错，请教各位大神为什么会出现这种情况呢？非常感谢：D
代码都贴在下面了
这是html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="mytodolist.css">
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<header>
<section>
<label for="title">ToDoList</label>
<input type="text" id="title" placeholder="添加ToDo" />
</section>
</header>
<section>
<h2 >正在进行 <span id="todocount"></span></h2>
<ol id="todolist" class="demo-box">
</ol>
<h2>已经完成 <span id="donecount"></span></h2>
<ul id="donelist">
</ul>
</section>
<footer>
</footer>
<script src="./mytodolist.js"></script>
</body>
</html>这是mytodolist.css
body {margin:0;padding:0;font-size:16px;background: #CDCDCD;}
header {height:50px;background:#333;background:rgba(47,47,47,0.98);}
section{margin:0 auto;}
label{float:left;width:100px;line-height:50px;color:#DDD;font-size:24px;cursor:pointer;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}
header input{float:right;width:60%;height:24px;margin-top:12px;text-indent:10px;border-radius:5px;box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;border:none}
input:focus{outline-width:0}
h2{position:relative;}
span{position:absolute;top:2px;right:5px;display:inline-block;padding:0 5px;height:20px;border-radius:20px;background:#E6E6FA;line-height:22px;text-align:center;color:#666;font-size:14px;}
ol,ul{padding:0;list-style:none;}
li input{position:absolute;top:2px;left:10px;width:22px;height:22px;cursor:pointer;}
p{margin: 0;}
li p input{top:3px;left:40px;width:70%;height:20px;line-height:14px;text-indent:5px;font-size:14px;}
li{height:32px;line-height:32px;background: #fff;position:relative;margin-bottom: 10px;
padding:0 45px;border-radius:3px;border-left: 5px solid #629A9C;box-shadow: 0 1px 2px rgba(0,0,0,0.07);}
ol li{cursor:move;}
ul li{border-left: 5px solid #999;opacity: 0.5;}
li a{position:absolute;top:2px;right:5px;display:inline-block;width:14px;height:12px;border-radius:14px;border:6px double #FFF;background:#CCC;line-height:14px;text-align:center;color:#FFF;font-weight:bold;font-size:14px;cursor:pointer;}
footer{color:#666;font-size:14px;text-align:center;}
footer a{color:#666;text-decoration:none;color:#999;}
@media screen and (max-device-width: 620px) {section{width:96%;padding:0 2%;}}
@media screen and (min-width: 620px) {section{width:600px;padding:0 10px;}}mytodolist.js
$(function() {
//页面加载就渲染数据到页面
refreshAll();
// 1.按下回车键把输入内容存入本地存储localstorage
$("#title").on("keydown",function(event) {
if (event.keyCode === 13) {
if ($(this).val() !== "") {
var data = getData();
var temp = {
title:$("#title").val(),
done:false,
}
data.push(temp);
saveData(data);
$(this).val("");
refreshAll();
}
}
});
//获取本地数据
function getData() {
var data = localStorage.getItem("todolist");
if (data != null) {
return JSON.parse(data);
} else {
return []
}
};
//保存数据到localstorage
function saveData(data) {
localStorage.setItem("todolist",JSON.stringify(data));
};
//渲染数据到页面，生成li
function refreshAll() {
var data = getData();
//遍历动态生成li之前先清空ol里面的内容
$("#todolist").empty();
$.each(data,function(i,e) {
var li = $("<li>" + "<input type='checkbox'>" + "<p>"+ e.title +
"</p>" + "<a href='javascript:;' id=" + i + "></a>" +"</li>");
// console.log(li);
$("#todolist").prepend(li);
})
};
//删除操作
$("a").on("click",function() {
var index = $(this).attr("id");
var data = getData();
data.splice(index,1);
saveData(data);
refreshAll();
})
})
这里绑定的太早了。绑定事件的时候，dom还没有，使用事件委托就可以了
$('body').on('click','a',function(){})