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>
-
Just FYI: adding html dynamically [$("ul").append("<li><span><i class='fa fa-trash'></i></span> " + todoText + "</li>")] got me into trouble in two ways: One with needing to use a setTimeout to add listeners to these elements, as the browser needs time to update to the new HTML, and second, Content-Security-Policy was disallowing changes like these. It's more work, but it's much better to just use document.createElement for all your new contentControlAltDel– ControlAltDel2020年03月20日 14:16:53 +00:00Commented Mar 20, 2020 at 14:16
-
does it help stackoverflow.com/questions/203198/…Sandeep Modak– Sandeep Modak2020年03月20日 14:19:31 +00:00Commented Mar 20, 2020 at 14:19
1 Answer 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.