![](/img/trans.png)
[英]selecting elements that are dynamically created and that listen to 2 or more events
[英]how to make events listen to dynamically created html elements using jquery?
我正在做这个项目,每当我单击加号时,我都必须克隆一个 todolist,它会克隆 todolist。但动态创建的 todolist 不侦听任何事件,即使我使用了 .on 而不是 .click。请查看图像以了解我在说什么。 左侧角的小加号用于克隆整个 todolist , todolist中较大的加号用于切换输入字段的可见性。 当通过单击小加号创建新的 todolist 时。新动态创建的 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"));
});
此布尔值指示事件处理程序是否应与元素一起复制。 默认值为false
。 所以,当我们在不传递任何布尔值的情况下调用.clone()
方法时,它只是复制元素而不是附加到它的事件处理程序。 但是,当我们传递值true
,它会复制元素和附加到它的任何事件处理程序。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.