任何人都可以告诉我做错了什么？

-1

我正在尝试使用HTML，CSS和jQuery制作一个简单的待办事项列表，而且我正面临一个问题，它不会添加新的待办事项输入，因为我想要它们，这里是代码，如果任何人都可以点在哪里我做错了。任何人都可以告诉我做错了什么？

// HTML 这里的HTML标签，它看起来对我罚款

<head> 
<title>TODO list</title> 
<link rel="stylesheet" type="text/css" href="assests/css/todos.css"> 
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet"> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> 
<script type="text/javascript" src="assests/js/lib/jquery-3.2.1.min.js"></script> 
</head> 
<body> 
    <div id="container"> 
     <h1>TO-DO List<i class="fa fa-plus"></i></h1> 
     <input type="text" placeholder="Add New Todo"> 
     <ul> 
      <li><span><i class="fa fa-trash"></i></span> Go To Potions Class</li> 
      <li><span><i class="fa fa-trash"></i></span> Buy New Robes</li> 
     <li><span><i class="fa fa-trash"></i></span> Visit Hogrid</li> 
     </ul> 
    </div> 
<script type="text/javascript" src="assests/js/todos.js"></script> 
</body>

// CSS

h1{ 
    background: #2980b9; 
    color: white; 
    margin: 0; 
    padding: 10px 20px; 
    text-transform: uppercase; 
    font-size: 24px; 
    font-weight: normal; 
} 
ul{ 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#container{ 
    box-shadow: 0 0 3px rgba(0,0,0, 0.1); 
    width: 360px; 
    margin: 100px auto; 
    background: #f7f7f7; 
} 

.completed{ 
    color: gray; 
    text-decoration: line-through; 
} 
body{ 
    font-family: 'Roboto', sans-serif; 
    background: #2BC0E4; /* fallback for old browsers */ 
    background: -webkit-linear-gradient(to right, #EAECC6, #2BC0E4); /*  Chrome 10-25, Safari 5.1-6 */ 
    background: linear-gradient(to right, #EAECC6, #2BC0E4); /* W3C, IE 10+/  Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 

} 
li{ 
    background: white; 
    height: 40px; 
    line-height: 40px; 
    color: #666; 
} 
li:nth-child(2n){ 
    background: #f7f7f7; 
} 

input{ 
    font-size: 18px; 
    background:#f7f7f7; 
    width: 100%; 
    padding: 13px 13px 20px 20px; 
    box-sizing:border-box; 
    color: #2980b9; 
    border:3px solid rgba(0,0,0,0); 
} 
input:focus{ 
    background:white; 
    border: 3px solid #2980b9; 
    outline: none; 
} 

.fa-plus{ 
    float: right; 
} 
span{ 
    background-color: #e74c3c; 
    height:40px; 
    margin-right: 20px; 
    text-align: center; 
    color: white; 
    width:0px; 
    display:inline-block; 
    transition: 0.2s linear; 
    opacity:0; 
} 
li:hover span{ 
    width:40px; 
    opacity:1.0; 
}

// jQuery的

而这里的jQuery的标签，我继“Web Developer Bootcamp”课程后，我必须使用这些代码编写TO-DO列表，并且编写完全相同的代码，但它仍然不起作用，当我想添加新的TO-Dos时，它将添加但不是因为它创造了一个空白的里面，当我将它悬停在里面时，它以典型的方式出现。 //通过点击

$("ul").on("click","li",function(){ 
    $(this).toggleClass("completed"); 
}); 
//click on X to delete TODO 


$("ul").on("click","span",function(event){ 
    //to remove parent lis 
    $(this).parent().fadeOut(500,function(){ 
    $(this).remove(); 
}); 
event.stopPropagation(); 
}); 

//adding new TODO 

$("input[type='text'").keypress(function(event){ 
    if(event.which===13){ 
     //grabbing new TODO text from input 
    var todoText= $(this).val(); 
    $(this).val(""); 
    //create a new li and add to ul 
    $("ul").append("<li><span><i class='fa fa-trash'><span> " + todoText +"</li>") 
    } 
});

来源

2017-08-30 Ankur Dutta