Javascript 将事件添加到DOM中多个位置的多个复选框中

我动态创建了多个部分，需要将事件侦听器添加到以下复选框中。注意：我不想选择所有复选框，只想选择那些包装在指定DIV标记中的复选框，这些标记是在我无法修改的代码中动态创建的

编辑：因为此问题被错误地标记为重复问题 我不想向元素添加事件，因为会向页面动态添加更多元素。我试图在页面首次加载时向DOM的多个部分添加一个事件。找到了与副本有争议的链接，它希望我更改某些内容

编辑：对于错误标记为重复问题的第二个问题，第二个重复链接仍然不适用。我已经知道如何将事件附加到HTML中。addEventListener将起作用，我希望找到分散在DOM中的所有相关复选框/元素，然后通过它们循环添加事件。在记下问题之前，请仔细阅读整个问题

类别 项目1 项目2 项目3 不是这个复选框 类别 项目4 项目5 项目6

---

这个问题是通过一种称为事件委派的技术来处理的。在调用addEventListener以获取一系列复选框事件时，需要侦听某个父节点（即存在的父节点）。任何复选框中的事件都会冒泡进入您的侦听器。然后，您可以测试event.target以确定事件是否发生在您感兴趣的复选框子集上

没有jQuery：

使用jQuery：

相关的深入回答：

编辑

当你编辑你的问题时，你有一个带有下拉菜单的类not id，你应该使用。而不是用类名下拉菜单选择所有的ul，所以你应该使用

$(document).on('change', '.dropdown-menu input[type="checkbox"]', function() {
  alert("Checkbox clicked");
});

为动态创建的复选框使用事件委派我删除了一个div，以向您展示添加新复选框的示例，并通过更改其状态（如果它在控制台中输出）进行检查

$document.on'change'，'保持打开输入[type=checkbox]'，函数{ console.log'checked'，$this.is'：checked'； }; $add.on'click'，函数{ 变量计数=$。保持打开>ul li'。长度； $。保持打开>ul。追加“新项目”+计数+ } 类别 项目1 项目2 项目3 不是这个复选框

---

我喜欢这个方向，但是我的问题是我不能更改HTML代码。实际上，我有十几个DIV分区可以从中提取复选框。我对问题进行了编辑，以提供更多信息。只要您将相同的类应用于父div，这将不会发生任何更改，您必须使用所有div中常见的东西来定位所有div。我已经用更多的代码更新了我的问题，以定义我要查找的内容。@thefid刚刚为您更新了答案，请参见编辑部分谢谢！这在目标复选框上非常有效。现在我让脚本运行起来，并再次检查了这个答案，它变得更有意义了。这个答案也是正确的。如果你有一段带有这个答案的代码，我会把它标记为答案。