0

我有一个简单的待办事项列表应用程序。待办事项由 jQuery 作为<li>项目插入。当它们被选中时，它们会被删除#todolist并添加到#donelist. 我想让用户替换他们不小心选中的待办事项，因此元素的.on处理程序#donelist .checkbox，但它不起作用。很长一段时间以来，我一直在为这个问题感到困惑。如何让点击处理程序为#donelist .checkboxes 工作？

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()工作得很好，这让我很困惑。checkTask()当用户单击动态插入的元素（由插入的adiv中的 a ）时调用。为什么也不会触发？liaddTask()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 回答