Question

我正在尝试用HTML，CSS和jQuery创建一个待办事项列表应用程序，我希望能够添加，编辑和删除任务。我能够将新任务添加到列表中，但是当我单击“编辑”和“删除”按钮时，我无法编辑或删除它们，我不确定它为什么不起作用。

我已将我的代码副本上传到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);
});

Answer 1

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

您可以做的是将事件处理程序委托给页面加载期间存在的祖先。事件＆＃34;泡沫＆＃34;对它的祖先，使祖先意识到你点击了一个后代。在这种情况下，您可以将处理程序附加到<ul>，并让它听取.delete的点击次数。

此外，ID应该是唯一的。您只能在页面上拥有其中一个。拥有多个可能导致不可预测的行为。改为使用类。

此外，$('li')会选择页面上的所有<li>。您可能希望缩小选择范围。您可以使用<li>

删除包含按钮的$(this).closest('li').remove()

您需要的代码应为此，并添加delete作为按钮类。为编辑应用相同的概念。

$('#todo_list').on('click', '.delete', function(){
  $(this).closest('li').remove()
});

Answer 2

我已经创建了一个工作示例 - 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);
});

Answer 3

尝试将jquery函数初始值设定项添加到enter_task函数中，这样就可以使用每个新行刷新它们。

＆＃13;

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

＆＃13;

<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>

＆＃13;

在jQuery Todo List App

3 个答案: