单击复选框不会删除新任务。

Question

我是编程新手，为了娱乐，我尝试将一个待办事项列表应用程序组合在一起。

当用户单击第一个项目的文本时，程序将删除该文本，并且当用户单击第一个项目的复选框时，它消失了，就像我想要的那样。 但是，当我添加新任务时，删除线和复选框不起作用。 这是我的代码。 谢谢了。

HTML
<!DOCTYPE html>
<head>    
</head>
<body>
    <div id = "header">
        <h1> To Do List</h1>
    </div>
    <div id = "form">
        <form>
            <input type = "text" id = "todo"> 
            <button type = "button" id= "submit"> Submit </button>
        </form>
    </div>

    <div id = "tasklist">
        <ol id = "list">
            <li id = "listitem"><input type = "checkbox" class="checkbox"      
> Clean</li>

        </ol>
    </div>
    <script type="text/javascript" src="todo.js"></script>
</body>

这是我的js

window.onload = function(){

    //Add new to do task by entering text and clicking submit
    var submit = document.getElementById('submit');
    submit.onclick = function(){
        var task = document.getElementById('todo').value;
        console.log(task);
        var ol = document.getElementById("list")
        var entry = document.createElement('li');
        entry.id = 'id'
        var checkbox = document.createElement('input');
        checkbox.type = "checkbox";
        checkbox.className = "checkbox"
        entry.appendChild(checkbox)
        entry.appendChild(document.createTextNode(task));
        ol.appendChild(entry);
        };

    //Strike through task if click on text
    $("li").click(function(){
        $(this).css("text-decoration", "line-through");
    });

    //Remove task when click checkbox
    $(".checkbox").click(function(){
        $(this).parent().hide();
    })
};

Answer 1

$("li").click(function(){单击处理程序仅在应用处理程序时适用于DOM中的元素-不适用于将来的元素！您将需要实现jQuery的.on()处理程序，它将对将来添加到DOM中的元素起作用。

//Strike through task if click on text
$(document).on('click','li', function(){
    $(this).css("text-decoration", "line-through");
});

//Remove task when click checkbox
$(document).on('change','.checkbox', function(){
    $(this).parent().hide();
});

https://jsfiddle.net/3fr54rp0/

Answer 2

您需要为这些链接委派事件处理程序，因为在呈现页面时它们不在DOM中。 您可以通过使用$(document).on()附加click处理程序并指定要附加处理程序的元素来完成此操作。

这是参考https://learn.jquery.com/events/event-delegation/

 //Add new to do task by entering text and clicking submit var submit = document.getElementById('submit'); submit.onclick = function() { var task = document.getElementById('todo').value; console.log(task); var ol = document.getElementById("list") var entry = document.createElement('li'); entry.id = 'id' var checkbox = document.createElement('input'); checkbox.type = "checkbox"; checkbox.className = "checkbox" entry.appendChild(checkbox) entry.appendChild(document.createTextNode(task)); ol.appendChild(entry); }; $(document).on('click', 'li', function(e) { //Strike through task if click on text $(this).css("text-decoration", "line-through"); }).on('click', '.checkbox', function(e) { //Remove task when click checkbox $(this).parent().hide(); })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="header"> <h1> To Do List</h1> </div> <div id="form"> <form> <input type="text" id="todo"> <button type="button" id="submit"> Submit </button> </form> </div> <div id="tasklist"> <ol id="list"> <li id="listitem"><input type="checkbox" class="checkbox"> Clean</li> </ol> </div>

单击复选框不会删除新任务。

问题描述

2 个解决方案

解决方案1
1 2017-03-11 00:32:29

解决方案2
0 2017-03-11 00:36:31

单击复选框不会删除新任务。

问题描述

2 个解决方案

解决方案1 1 2017-03-11 00:32:29

解决方案2 0 2017-03-11 00:36:31

解决方案1
1 2017-03-11 00:32:29

解决方案2
0 2017-03-11 00:36:31