gpt4 book ai didi

javascript - 如何使用 jquery 让事件监听动态创建的 html 元素?

转载 作者:行者123 更新时间:2023-12-02 21:24:18 27 4
gpt4 key购买 nike

我正在做这个项目,每当我单击加号时,我都必须克隆一个待办事项列表,它会克隆该待办事​​项列表。但是动态创建的待办事项列表不会监听任何事件,即使我使用了 .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/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com