Question

我正在做这个项目，我每当单击加号时都必须克隆一个待办事项列表，它会克隆待办事项列表。但是即使我使用.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>

Answer 1

解决此问题的简单技巧是将true传递给.clone()方法：

$("#test").on("click",function(){
    $("#container").clone(true).insertAfter($("#container"));
});

此布尔值指示是否应将事件处理程序与元素一起复制。默认值为false。因此，当我们在不传递任何布尔值的情况下调用.clone()方法时，它只是复制元素，而不是复制附加的事件处理程序。但是，当我们传递值true时，它将同时复制元素和附加到它的任何事件处理程序。

如何使用jquery使事件侦听动态创建的html元素？

1 个答案: