Javascript 待办事项列表在控制台中工作，但不在页面上

我正在用HTML、CSS和JavaScript制作一个待办事项列表应用程序

我在每个待办事项后面都列出了一个按钮（实际上是

span

）。当用户单击

span

时，它当前应该获得span的id，以便传递给delete函数（我还没有编写）

以下是单击事件：

$(".delete").click(function(e) {
    var clickedtodelete = $(this).attr("id");
    console.log("Deleting " + clickedtodelete);
});

当我测试页面时，我单击一个span，其类为

.delete

，并应将以下输出转到控制台：

删除要执行的测试

。然而，什么也没有发生

但是，如果我首先手动在控制台中键入click事件，我会获得控制台的正确输出。因此，从页面获取脚本时可能只是一个错误。
但是，来自同一.js页面的所有其他脚本都可以工作

---

最后，我得到一个类型警告，但我被告知这不会影响它。

如果动态添加元素，则必须使用委派：

$(document).on("click",".delete", function (e) {
    var clickedtodelete = $(this).attr("id");
    console.log("Deleting " + clickedtodelete);
});

或者您没有等待DOM就绪：

$(function(){...});

或者，您可以将处理程序代码放在body closing标记之前：

<script>
$(".delete").click(function (e) {
    var clickedtodelete = $(this).attr("id");
    console.log("Deleting " + clickedtodelete);
});
</script>
</body>

$（“.delete”）。单击（函数（e）{
var clickedtodelete=$（this.attr（“id”）；
控制台日志（“删除”+单击删除）；
});

有了待办事项列表，我想这些项目是动态生成的。我怀疑您的问题的原因是，单击事件是在您希望绑定它们的元素存在之前绑定的。您可以使用的

on（）

方法解决此问题，如下所示：

$(document).on({
    click: function(e) {
        var clickedtodelete = $(this).attr("id"); 
        console.log("Deleting " + clickedtodelete);
    }
}, '.delete');

---

使用此解决方案，事件将附加到文档（始终存在），并在每次接收到事件时简单地检查目标。这允许动态添加事件。

是否使用

jQuery（document）.ready（函数（$）{}）？是的，但是，问题已经解决了，但是无论如何，谢谢。请有人告诉我为什么这个问题被否决了吗？@dKen请你告诉我为什么这个问题被否决了，这样我就可以解决它了吗？不确定，我没有否决解决它的银行。我会尽快接受你的回答。