チェックボックスをクリックすると、新しいタスクは削除されません。

私はプログラミングには慣れていないし、楽しいためにtodoリストアプリをまとめようとしている。チェックボックスをクリックすると、新しいタスクは削除されません。

ユーザーが最初のアイテムのテキストをクリックすると、プログラムはテキストを打ち切ります。最初のアイテムのチェックボックスをクリックすると、そのアイテムは消えます。しかし、私が新しいタスクを追加すると、ストライクスルーとチェックボックスは機能しません。ここに私のコードです。に感謝します。それは、将来の要素のために動作しません - ここ

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>

は$("li").click(function(){クリックハンドラのみハンドラが適用されるときにDOM内にある要素のために動作します私の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(); 
    }) 
};

出典

2017-03-11 affemann2

です！代わりに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/

出典

2017-03-11 00:32:29 rorymorris89

ありがとうございました!! – affemann2

あなたは、彼らがページがレンダリングされたDOMではないので、それらのリンクのためのイベントハンドラを委任する必要があります。これを行うには、を使用してハンドラを添付し、ハンドラに追加する要素を指定して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>

出典

2017-03-11 00:36:31

ありがとうございます – affemann2

@ affemann2あなたは大歓迎です:) –

チェックボックスをクリックすると、新しいタスクは削除されません。

答えて

関連する問題