在使用jQuery的load()函数的时候，加载创建<li>标签时候，创建的li闪一下消失了。请问有人知道这是怎么回事吗~
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToDoList</title>
<link rel="stylesheet" href="../css/toDoList.css">
<script src="../jQuery.js"></script>
<script src="../js/toDolist.js"></script>
</head>
<body>
<header>
<section>
<form action="#" id="form">
<label for="title">ToDoList</label>
<input type="text" id="title" name="title" placeholder="添加ToDo" required="required"
autocomplete="off" />
</form>
</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>
Copyright ©2014 todolist.cn <a href="javascript:;">clear</a>
</footer>
</body>
</html>
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: 0px;
}
h2{
position: relative;
border: 1px solid black;
}
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;
border: 1px solid black;
}
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;}
}
js：
$(function () {
var todolist = [];
$("#title").on("keydown", function (event) {
if (event.keyCode === 13) {
//1.读取本地存储原来的数据
var local = getDate();
console.log(local);
local.push({ title: $(this).val(), done: false });
saveData(local);
load();
}
})
//读取本地存储的数据，并返回对象格式的数据
function getDate() {
var data = localStorage.getItem("todolist");
if (data !== null) {
return JSON.parse(data);
}
else {
return [];
}
}
// 保存本地存储数据
function saveData(data) {
localStorage.setItem("todolist", JSON.stringify(data));
}
//渲染加载数据
function load() {
var data = getDate();
$.each(data, function (i, n) {
$("ol").prepend("<li><input type='checkbox' /><p></p><a href='javascript:;'></a></li>");
})
}
})
478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
