javascript - 当我使用 ID 代替 DOCUMENT 或 BODY 定位事件时，使用 jQuery 中的 on() 函数的单击事件不起作用

Question

我有一个 jQuery Click 事件，最近停止工作了!这是一个非常大的项目，有数百个文件，所以我可以在过去的一周轻松地更改它，但现在我发现这是一个问题，但没有意识到它。

下面是有关点击事件的最基本示例。现在我可以轻松地使用 document 或 body 作为上周的第一项，然后我将其更改为目标更接近我的实际目标的 ID单击事件。

在读到我应该使用更接近需要点击事件的项目的 ID 而不是使用 document 或 body.考虑到这一点，我想在过去的几周里，我可能用 #taskWrap 这个 ID 来替换它，以替换 document 之类的东西。

无论是哪种情况，无论我是否这样做，几天到一周前它都工作正常，现在单击项目时单击事件不会触发任何内容。我设置了一个 alert() 来测试它，但什么也没发生。

现在为了进一步测试，我将 #taskWrap 更改回 document 并且点击事件立即再次工作!所以这似乎确实是问题所在。

下面是我现在的代码，但不起作用!下面是来自 Chrome 开发工具的图像，其中显示了我正在使用的区域的一些 DOM 结构。

我希望有人能告诉我，当我尝试使用比 document 和 body 更接近目标的 ID 来定位我的项目时，我做错了什么？

$('#taskWrap').on('click', '#taskWrap .status_update', function(e) {

    alert('.status_update class checkbox task item clicked!');

});

我也尝试过，结果相同，点击事件没有发生...

$('#taskWrap').on('click', '.status_update', function(e) {

    alert('.status_update class checkbox task item clicked!');

});

这确实有效，但我试图通过不必使用 document 或 body 来更好地优化

$('document').on('click', '.status_update', function(e) {

    alert('.status_update class checkbox task item clicked!');

});

<小时/>

更新更具体的问题...

Google 搜索 jQuery 中 DOM 中真正考虑什么后代的结果是这样的...

“后代是 child 、孙子、曾孙等等。使用 jQuery，您可以遍历 DOM 树来查找元素的后代。”

所以现在我很困惑，因为我觉得 .status_update 应该被视为 #taskWrap 的 great-great-grandchild 。我的这种想法错了吗？如果是的话请帮我理解为什么不是？

根据下图，从我的 #taskWrap DIV 遍历 DOM 到我的 .status_update DIV 之一，如下所示...

#taskWrap > table.detail > tbody > td.task-checkbox > .status_update

请帮助我理解我错在哪里，以及我的 jQuery 应该用什么替换 #taskWrap 来定位我的 .status_update DIV？

该图像显示了与我单击的 .status_update DIV 任务项所在位置相关的 #taskWrap DIV...

<小时/>

解决方案/答案的最终更新:

事实证明，随着我最近重组代码，我的点击事件被移至另一个文件，并且它们根本没有包含在 DOC READY 代码中...

$(document).ready(function() { 
    alert('DOM LOADED');
})

这解决了我的问题以及该行的明显变化，如下面答案中发布的那样......

$('#taskWrap').on('click', '#taskWrap .status_update', function(e) {

更改为...

$('#taskWrap').on('click', '.status_update', function(e) {

Answer 1

我相信问题出在你的后代选择器上。您的事件处理程序绑定(bind)应如下所示:

$('#taskWrap').on('click', '.status_update', function(e) {

    alert('.status_update class checkbox task item clicked!');

});

http://jsfiddle.net/zvbjn9wv/

这是因为 #taskWrap 元素中没有 #taskWrap 后代。