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

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 模型生成的内容

JS selector on click not working for django model generated content

javascript

jquery

jquery-events

动态创建的内容