编辑和删除动态生成的列表项目在jQuery待办事项列表应用程序

Editing and Deleting Dynamically Generated List Items in jQuery Todo List App

本文关键字：列表 jQuery 应用程序 项目 动态 删除 编辑      更新时间：2023-09-26

我试图在HTML, CSS和jQuery中创建一个待办事项列表应用程序，我希望能够添加，编辑和删除任务。我可以在列表中添加新任务，但当我点击"编辑"answers"删除"按钮时，我无法编辑或删除它们，我不知道为什么它不起作用。

我已经将我的代码副本上传到jsfiddle (https://jsfiddle.net/LearningToCode/nndd1byt/6/)，并在下面包含了一个副本。

如果你能提供任何帮助，我将不胜感激。谢谢!

预期行为:

  • 点击任务旁边的"删除"按钮应该允许用户删除该任务。

  • 点击任务旁边的"编辑"按钮，应该允许用户编辑该任务的文本。

实际行为:

  • 点击"删除"按钮无效

代码示例:

HTML 

<h1>Todo List</h1>  
   <input type="text" id="enter_task" placeholder="Enter Task">
   <input type="submit" id="add" value="Add Task">
<p>
   <ul id="todo_list">
   </ul>
</p>
JavaScript 

function enter_task () {
   var text = $('#enter_task').val();
   $('#todo_list').append('<li>'+ text + ' <input type="submit" id="edit" value="Edit">' + '<input type="submit" class="done" id="delete" value="Delete">'  +'</li>');
};
$('#edit').click(function(){
   $('li').attr('contenteditable','true');
});
$('#delete').click(function(){
   $('li').remove();
});
$(function() {
   $('#add').on('click', enter_task);
});

问题是删除按钮是动态创建的。在页面加载期间，$('#delete')返回一个空集合，因为那里还没有对象。当您最终拥有列表项时，它们的删除按钮不会绑定到任何东西。

你可以做的是将事件处理程序委托给页面加载期间存在的祖先。事件"冒泡"到它的祖先，让祖先知道你点击了后代。在本例中，您可以将处理程序附加到<ul>，并让它侦听.delete上的点击。

另外，id应该是唯一的。页面上只能有一个。拥有超过一个可能会导致不可预测的行为。用类代替。

同样，$('li')将选择页面上的所有<li>。你可能需要缩小你的选择范围。你可以使用$(this).closest('li').remove()

删除包含按钮的<li>您需要的代码应该是这样的，并添加delete作为按钮类。对edit应用相同的概念。 
$('#todo_list').on('click', '.delete', function(){
  $(this).closest('li').remove()
});

我已经创建了一个工作示例- https://jsfiddle.net/nndd1byt/7/

function enter_task () {
    var text = $('#enter_task').val();
    $('#todo_list').append('<li>'+ text + ' <input type="submit" class="edit" value="Edit">' + '<input type="submit" class="done delete" value="Delete">' +'</li>');
};
$('#todo_list').on('click', '.edit', function(){
    $(this).parent().attr('contenteditable','true');
});
$('#todo_list').on('click', '.delete',function(){
    $(this).parent().remove();
});
$(function() {
    $('#add').on('click', enter_task);
});

尝试将jquery函数初始化器添加到enter_task函数中，这样每增加一行，它们就会刷新。

var counter = 1;
function enter_task () {
        var text = $('#enter_task').val();
        $('#todo_list').append('<li><span>'+ text + ' </span><input type="submit" id="edit' + counter + '" value="Edit">' + '<input type="submit" class="done" id="delete' + counter + '" value="Delete">' +'</li>');
  
$('#edit' + counter).click(function(){
    $(this).prev().attr('contenteditable','true');
    $(this).prev().focus();
});
$('#delete' + counter).click(function(){
    $(this).parent().remove();
});
  counter++;
};
$(function() {
    $('#add').on('click', enter_task);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Todo List</h1>  
    <input type="text" id="enter_task" placeholder="Enter Task">
    <input type="submit" id="add" value="Add Task">
    <p>
        <ul id="todo_list">
        </ul>
    </p>

相关文章：