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

Question

我有一个简单的待办事项列表应用。待办事项由 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() 在用户单击动态插入的元素时被调用（li 中的div 由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;
}

JavaScript 在 document.ready() 中

$('#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)
}