我正在做这个项目，每当我单击加号时，我都必须克隆一个待办事项列表，它会克隆该待办事项列表。但是动态创建的待办事项列表不会监听任何事件，即使我使用了 .on 而不是 .click。请查看图像来理解我所说的内容。 The small plus sign in the left side corner is used to clone the entire todolist 待办事项列表中较大的加号用于切换输入字段的可见性。 当通过单击小加号创建新的待办事项列表时。新的动态创建的待办事项列表中的事件监听器不起作用。
// Check Off Specific Todos By Clicking
$("ul").on("click", "li", function(){
$(this).toggleClass("completed");
});
//Click on X to delete Todo
$("ul").on("click", "span", function(event){
$(this).parent().fadeOut(500,function(){
$(this).remove();
});
event.stopPropagation();
});
$("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'></i></span> " + todoText + "</li>")
}
});
$(".fa-plus").on("click",function(){
$("input[type='text']").fadeToggle();
});
$("#test").on("click",function(){
$("#container").clone().insertAfter( $("#container") );
});
这是我的 html 代码
<!DOCTYPE html>
<html>
<head>
<title>Todo List</title>
<link rel="stylesheet" type="text/css" href="assets/css/todos.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,500' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<script type="text/javascript" src="assets/js/lib/jquery-2.1.4.min.js"></script>
</head>
<body>
<i class="fa fa-plus-square" id="test"></i>
<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 Hagrid</li>
</ul>
</div>
<script type="text/javascript" src="assets/js/todos.js"></script>
</body>
</html>
最佳答案
解决此问题的简单技巧是将 true 传递给 .clone()方法:
$("#test").on("click",function(){
$("#container").clone(true).insertAfter($("#container"));
});
此 bool 值指示事件处理程序是否应与元素一起复制。默认值为false。因此，当我们在不传递任何 bool 值的情况下调用 .clone() 方法时，它只是复制元素，而不是附加到它的事件处理程序。但是，当我们传递值 true 时，它会复制元素以及附加到其上的任何事件处理程序。
关于javascript - 如何使用 jquery 让事件监听动态创建的 html 元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60775811/