how to make events listen to dynamically created html elements using jquery?

Question

im doing this project where i have to clone a todolist whenever i click a plus sign,it clones the todolist.But the dynamically created todolist doesnt listen for any events eventhough i have used .on instead of .click.Please view the image to understand what i m telling. The small plus sign in the left side corner is used to clone the entire todolist and the bigger plus sign inside the todolist is used to toggle the visibility of the input field. When a new todolist is created by clicking on the small plus sign.Event listeners in the new dynamically created todolist doesnt work.

    // 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") );
    });

This is my html code

<!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>

does it help https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements?rq=1 — Sandeep Modak, Mar 20 '20 at 14:19

score 1 · Accepted Answer · answered Mar 20 '20 at 14:16

1

The simple trick here to resolve this issue is to pass true to the .clone() method:

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

This boolean value indicates whether event handlers should be copied along with the elements. The default value is false. So, when we were calling the .clone() method without passing any boolean value, it was just copying the elements but not the event handlers attached to it. But, when we pass the value true, it copies both the elements and any event handler attached to it.

answered Mar 20 '20 at 14:16

palaѕн

72,112
17
116
136

i was wondering how to add the dynamically created new todolist permanently to the html ?can u help me out with that – Sai Darshan Mar 20 '20 at 14:24
Please create a separate question for that. – palaѕн Mar 20 '20 at 14:24
Also, while creating the question please add a small demo and minimise the code to a minimum like here is a button and here is a small list, you create a clone of it now this is the issue.. how to resolve it, as it will be easier for others user to understand and help you faster. – palaѕн Mar 20 '20 at 14:28

how to make events listen to dynamically created html elements using jquery?

1 Answers1