我正在构建一个待办事项应用程序。当我添加待办事项然后单击下面的待办事项项目时，其文本应该被交叉(线程)，但它没有发生。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="style.css" type="text/css" rel="stylesheet">
<title>Todo</title>
</head>
<body>
<div class="container">
<div class="header">
<h1>Todo</h1>
<div class="add">
<div class="text">
<input class="data" placeholder="Enter data">
</input>
</div>
<div class="submit">
<div class="submit-text">
Add
</div>
</div>
</div>
</div>
</div>
<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="script.js" ></script>
</body>
</html>
CSS:
body{
margin:0;
padding:0;
}
.container{
width:600px;
margin:0 auto;
color:#000;
}
.header{
background:#dddddd;
height:200px;
}
.header h1{
color:#FFF;
font-size:50px;
text-align: center;
margin-top:0px;
}
.add{
height:50px;
background:#FFF;
border-left:1px solid #dddddd;
}
.text,.submit{
display:inline-block;
float:left;
}
.text{
width:70%;
height:100%;
}
.submit{
width:30%;
background:green;
height:100%;
font-size: 30px;
}
.data{
font-size: 30px;
/* margin-top: 10px; */
/* padding: 10px 0; */
padding-left: 10px;
width:100%;
border: none;
padding-top: 8px;
padding-bottom: 8px;
}
.submit-text{
/* margin-top: 10px; */
padding: 10px 0;
text-align: center;
color:#FFF;
}
.todorow{
width:100%;
height:50px;
font-size: 30px;
padding-top:10px;
background:#000000;
color:#FFF;
}
.todoitem{
width:95%;
float:left;
display:inline-block;
}
.todoremove{
width:5%;
float:left;
display:inline-block;
}
.strike{
text-decoration: line-through;
}
JS:
console.log("loads");
$(document).ready(function(){
$(".submit").click(function(){
// if (document.getElementsByClassName("data")[0].innerHTML >0)
//{
var value = "<div class='todorow'><div class='todoitem'>"+$('.data').val()+"</div><div class='todoremove'>X</div></div>";
$(".container").append(value);
//}
});
$(".todoitem").on("click", "#__internal", function(){
$(".todoitem").addClass("strike");
alert("done");
console.log("done");
});
console.log("loads");
});
最佳答案
你的 fiddle 无法工作，因为 $ 未定义，但我已经修复了它并设法找到了错误。当没有待办事项时，您订阅 .todoitem 选择器。几年前，我们使用 .live() 作为解决方法，但现在我们使用更简单的语法。
$(document).ready(function(){
$(".submit").click(function(){
// if (document.getElementsByClassName("data")[0].innerHTML >0)
//{
var value = "<div class='todorow'><div class='todoitem'>"+$('.data').val()+"</div><div class='todoremove'>X</div></div>";
$(".container").append(value);
//}
});
$(document).on("click", ".todoitem", function(){
$(this).addClass("strike");
alert("done");
console.log("done");
});
console.log("loads");
});
所以基本上您可以使用委托(delegate)事件将处理程序添加到文档中。您可以使用此链接 http://api.jquery.com/on/ 阅读更多内容
关于javascript - 动态div的点击事件不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48714596/