0

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

我在每个待办事项之后都列出了一个按钮（实际上是一个span）。当用户单击span它时，它当前应该获取准备好传递给删除函数的跨度 id（我还没有写）。

这是点击事件： 

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

当我测试页面时，我单击一个类为的跨度，.delete并且应该得到控制台以下输出：Deleting Test To-Do. 然而，什么也没有发生。

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

最后，我收到一个MIME类型警告，但有人告诉我这不会影响它。

4

2 回答 2

0

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

$(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>
于 2013-05-31T10:52:35.433 回答
0

有了待办事项列表，我想这些项目是动态生成的。我怀疑您的问题的原因是单击事件在您希望绑定它们的元素之前被绑定。您可以使用jQuery的方法来解决这个问题on()，如下所示：

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

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

于 2013-05-31T10:53:09.767 回答