Question

我有一个简单的待办事项列表应用程序。待办事项由jQuery作为<li>项插入。当它们被检查后，它们会从#todolist移除并前置于#donelist。我想让用户替换他们意外检查的待办事项，因此.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()工作得很好，这让我很困惑。当用户点击动态插入的元素（由checkTask()插入的div中的li时，系统会调用addTask()。为什么replaceTask()不会触发好？

Answer 1

在OP中使用相应的HTML会有所帮助，所以我不得不猜测一下结构如何，但这是我认为你正在寻找的工作example：

<强> 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)
}

处理程序上的jquery不适用于插入的元素

1 个答案: