Dynamic div's click event not working

Question

I am building a todo app. When I add a todo and then click on the todo item below, its text should be crossed (line-through) but its not happening.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="style.css" type="text/css" rel="stylesheet">
    <title>Todo</title>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Todo</h1>
            <div class="add">
                <div class="text">
                    <input class="data" placeholder="Enter data">

                    </input>
                </div>
                <div class="submit">
                    <div class="submit-text">
                        Add
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script
            src="http://code.jquery.com/jquery-3.3.1.js"
            integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
            crossorigin="anonymous"></script>
    <script src="script.js" ></script>
</body>
</html>

CSS:

body{
    margin:0;
    padding:0;
}
.container{
    width:600px;
    margin:0 auto;
    color:#000;
}
.header{
    background:#dddddd;
    height:200px;
}
.header h1{
    color:#FFF;
    font-size:50px;
    text-align: center;
    margin-top:0px;
}
.add{
    height:50px;
    background:#FFF;
    border-left:1px solid #dddddd;
}
.text,.submit{
    display:inline-block;
    float:left;
}
.text{
    width:70%;
    height:100%;
}
.submit{
    width:30%;
    background:green;
    height:100%;
    font-size: 30px;
}
.data{
    font-size: 30px;
    /* margin-top: 10px; */
    /* padding: 10px 0; */
    padding-left: 10px;
    width:100%;
    border: none;
    padding-top: 8px;
    padding-bottom: 8px;
}
.submit-text{
    /* margin-top: 10px; */
    padding: 10px 0;
    text-align: center;
    color:#FFF;
}
.todorow{
    width:100%;
    height:50px;
    font-size: 30px;
    padding-top:10px;
    background:#000000;
    color:#FFF;
}
.todoitem{
    width:95%;
    float:left;
    display:inline-block;
}
.todoremove{
    width:5%;
    float:left;
    display:inline-block;
}
.strike{
    text-decoration: line-through;
}

JS:

console.log("loads");

$(document).ready(function(){
    $(".submit").click(function(){
       // if (document.getElementsByClassName("data")[0].innerHTML >0)
        //{

            var value = "<div class='todorow'><div class='todoitem'>"+$('.data').val()+"</div><div class='todoremove'>X</div></div>";
            $(".container").append(value);
        //}
    });
    $(".todoitem").on("click", "#__internal", function(){
        $(".todoitem").addClass("strike");
        alert("done");
        console.log("done");
    });
    console.log("loads");
});

Fiddle

your event delegation is wrong i dont even know where __internal is. look through jquery on function — JoshKisb, Feb 09 '18 at 21:53

score 1 · Answer 1 · answered Feb 09 '18 at 21:58

Your fiddle was not working because $ was not defined, but I've fixed it and managed to find the error. You subscribing to .todoitem selector, when there are no todo items. Years ago we used .live() as a workaround, but now we use even simpler syntax.

$(document).ready(function(){
    $(".submit").click(function(){
       // if (document.getElementsByClassName("data")[0].innerHTML >0)
        //{

            var value = "<div class='todorow'><div class='todoitem'>"+$('.data').val()+"</div><div class='todoremove'>X</div></div>";
            $(".container").append(value);
        //}
    });
    $(document).on("click", ".todoitem", function(){
        $(this).addClass("strike");
        alert("done");
        console.log("done");
    });
    console.log("loads");
});

So basically you add handler to document with delegated event. You can read more using this link http://api.jquery.com/on/

Please don't answer questions that are duplicates. As a steward of SO, you should vote to close as duplicate (if you have the reputation), OR link to the duplicate question / answer in a comment. — random_user_name, Feb 09 '18 at 22:05
I agree it might look as a dupe of https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements but I don't think it is. User narrowed down his issue to specific problem and I believe that pointing out exact place where his code is wrong is better solution here. I don't think he would end up with solution himself going to the provided link. — Vitalii Chmovzh, Feb 09 '18 at 22:10

Dynamic div's click event not working

1 Answers1