javascript - 如何让事件监听使用 jquery 动态创建的 html 元素?
问题描述
我正在做这个项目,每当我单击加号时,我都必须克隆一个 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()
方法时,它只是复制了元素,而不是附加到它的事件处理程序。但是,当我们传递 value 时true
,它会复制元素和附加到它的任何事件处理程序。
推荐阅读
- python - 从 FTP 服务器到 Flask 服务器的 Python 流以供下载
- spring - 如何处理 Spring reactor Mono 或 Flux 中的错误?
- objective-c - 从数组中调用元素并将其分配给变量?
- python - 加入两个具有多个值的 Rdd 并基于加入 Pyspark 添加额外的值?
- python - 使用子进程在 python 中发送电子邮件
- pycharm - PyCharme IDE 问题
- laravel-5.5 - 如何通过 laravel 5.6 中的角色保护管理区域免受用户的攻击?
- android - 如何在 Android 4.4.4 或之前的版本中实现 shouldInterceptRequest
- python - 在 Pandas 中使用 pd.to_datetime 的日期不正确
- cmake - CMAKE_SYSTEM_PROCESSOR 似乎是空的。与操作系统无关的最佳策略是什么?