0

シンプルな To Do リスト アプリを用意しました。To-do アイテムは、jQuery によってアイテムとして挿入され<li>ます。それらがチェックされている場合、それらは から削除され#todolist、 の先頭に追加され#donelistます。ユーザーが誤ってチェックオフした To Do 項目を置き換えさせたいので、要素の.onハンドラーですが、機能していません。#donelist .checkbox私は恥ずかしいほど長い間、これについて困惑してきました。#donelist .checkboxクリック ハンドラーをesで動作させるにはどうすればよいですか?

HTML:

<div id="topform">
    <input type="text" id="task" placeholder=" New task...">
</div>

<ul id="todolist">

</ul>

<ul id="donelist">

</ul>

JS:

$('#todolist').on('click', '.checkbox', checkTask);
$('#donelist').on('click', '.checkbox', replaceTask);

$('input').keypress(function (e) {
    if (e.which == 13) {
    addTask(e);
    }
});

function addTask(e) {
    taskToAdd = $('#task').val();
    var listItem = "<li><span class='todotask'>" + taskToAdd + "</span><div class='checkbox'></div></li>";
    $('#todolist').prepend(listItem);
}

function checkTask() {
    var listItem = $(this).parent();
    listItem.remove();
    $('#donelist').prepend(listItem);
}

function replaceTask() {
    alert('hey buddy');
}

完全な CSS:

html,
body {
margin: 0;
padding: 0;
background-color: #313131;
font-family: 'Helvetica', sans-serif;
}

#task {
width: 98%;
margin: 5px auto 7px auto;
padding: 0;
display: block;
height: 45px;
border: none;
border-radius: 2px;
font-size: 25px;
background-color: #F7F7F7;
}

ul {
margin: 0 auto 0 auto;
padding: 0;
width: 98%;
}

li {
list-style-type: none;
padding: 0;
margin: 5px auto 0 auto;
width: 100%;
height: 45px;
line-height: 45px;
position: relative;
font-size: 25px;
border-radius: 2px;
background-color: #F7F7F7;
}

#donelist li {
opacity: .5;
text-decoration: line-through;
}

.todotask {
margin-left: 7px;
}

.checkbox {
height: 31px;
width: 31px;
border-radius: 2px;
background-color: #C1C1C1;
position: absolute;
right: 7px;
top: 7px;
}

checkTask()それは本当に私を混乱させるものです。ユーザーが動的に挿入された要素 (によって挿入された a内の a ) をcheckTask()クリックすると呼び出されます。同様に起動しないのはなぜですか?divliaddTask()replaceTask()

4

1 に答える 1

1

OPに対応するHTMLがあれば助けになったので、構造について少し推測する必要がありましたが、探していると思われるものの実際の例を次に示します。

HTML

<h1>ADD</h1>
<input id="task"></input>
<button id="add">Add</button>

<h1>TODO</h1>
<ul id="todolist">
    <li><span class='todotask'>" Take out the garbage "</span><div class='checkbox'></div></li>
    <li><span class='todotask'>" Do the dishes "</span><div class='checkbox'></div></li>
</ul>

<h1>DONE</h1>
<ul id="donelist">

</ul>

CSS

.checkbox{
    width: 15px;
    height: 15px;
    background-color: black;
    display: inline-block;
    cursor: pointer;
}

document.ready() 内のJavaScript

$('#todolist').on('click', '.checkbox', checkTask);
$('#donelist').on('click', '.checkbox', replaceTask);
$("#add").click(addTask);


function addTask(e) {
    taskToAdd = $('#task').val();
    var listItem = "<li><span class='todotask'>" + taskToAdd + "</span><div class='checkbox'></div></li>";
    $('#todolist').prepend(listItem);
}

function checkTask() {
    var listItem = $(this).parent();
    listItem.remove();
    $('#donelist').prepend(listItem);
}

function replaceTask() {
    var listItem = $(this).parent();
    listItem.remove();
    $('#todolist').prepend(listItem)
}
于 2013-10-04T17:13:32.937 に答える