Question

我正在构建一个todo应用。当我添加一个待办事项，然后点击下面的待办事项时，它的文本应该被越过（直通），但它没有发生。

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

Answer 1

你的小提琴无法正常工作，因为$未定义，但我已修复它并设法找到错误。当没有待办事项时，您订阅了.todoitem选择器。几年前，我们使用.live()作为解决方法，但现在我们使用更简单的语法。

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

所以基本上你用委托事件向文档添加处理程序。您可以使用此链接http://api.jquery.com/on/

了解更多信息

动态div的点击事件无效

1 个答案: