Question

我正在浏览jQuery的todo列表教程，我遇到了一个我无法弄清楚的问题。我的代码看起来与视频中的内容完全一样。我试图在Plunker和JSFiddle上都这样做，但是无法让它工作。任何人都可以看到这有什么问题吗？

这是我的HTML：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />

  </head>

  <body>
    <h1>Tasks</h1>

    <ul id="todoList">

    </ul>

    <input type="text" id="newText" /><button id="add">Add</button>



    <script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <script src="script.js"></script>
  </body>

</html>

和我的jQuery：

function addListItem() {
  var text = $('#newText').val();
  $('#todoList').append('<li>' + text + ' <button class="delete">Delete</button></li>');
  $('#newText').val('');
}

function deleteItem() {
  $(this).parent().remove();
}

$(function() {
  $('#add').on('click', addListItem);
  $('.delete').on('click', deleteItem);
});

Answer 1

试试这个：

$('.delete').on('click', deleteItem); => $('body').on('click', '.delete', deleteItem);

说明：如果要将事件链接到尚不存在的元素，则必须先绑定到文档。

$（本）.parent（）remove（）方法。不起作用

1 个答案: