Question

这可能是一个愚蠢的错误，但我有这个代码：

$('#delete-btn').on('click', function(){
    return confirm('Are you sure you want to delete this?');
});

警报不会发生，但使用此代码可以：

$(document).on('click', '#delete-btn', function(){
    return confirm('Are you sure you want to delete this?');
});

从我的理解他们是相同的东西，但第二个尝试处理事件每次点击页面寻找指定的ID。我试着把它放在一个文件准备好的块中但是没有用。

我不明白为什么一个有效，另一个没有。

Answer 1

如果您引用的元素是当时文档的一部分，那么您的第一个代码也会起作用，因此请确保将脚本放在文档末尾附近，否则将其包装在ready处理程序：

$(function () {
    $('#delete-btn').on('click', function(){
        return confirm('Are you sure you want to delete this?');
    });
});

第二个脚本（$(document).on('click' ...)）有效，因为文档从一开始就存在，所以处理程序绑定到它。在单击时，事件会冒泡到文档，处理程序将启动。

动态创建内容

如果您的按钮在页面加载时不在文档中，但是是动态生成的，则上面的代码可能仍会查找按钮即将。您提到django生成按钮。它可能还会在文档准备就绪时捕获事件，然后查询数据库，等待其回复（在大多数情况下这是异步的），然后才添加按钮。如果您的代码已经运行了那段时间，它就会错过按钮，并且没有附加事件处理程序。

在这种情况下，将事件委托用于文档级别（$(document).on('click' ...)）确实是一个更可靠的解决方案。

单击JS选择器不适用于django模型生成的内容

1 个答案:

动态创建内容