Question

我正在制作一个包含HTML，CSS和JavaScript的待办事项列表应用程序。

我在每个待办事项后都列出了一个按钮（实际上是span）。当用户点击span时，它当前应该获得span的id，准备传递给delete函数（我还没写过）。

以下是点击事件：

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

当我测试页面时，我单击了.delete类的跨度，并且应该在控制台中输出以下输出：Deleting Test To-Do。然而，没有任何事情发生。

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

最后，我收到MIME类型警告，但我被告知这不会影响它。

Answer 1

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

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

或者您没有等待DOM准备就绪：

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

或者您可以将处理程序代码放在正文结束标记之前：

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

Answer 2

使用待办事项列表，我想象项目是动态生成的。我怀疑你的问题的原因是在你希望绑定它们的元素存在之前绑定了click事件。您可以使用jQuery的on()方法解决此问题：

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

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

待办事项列表在控制台中有效，但在页面上无效

2 个答案: