如何使JavaScript事件侦听器检测动态添加的复选框事件

我正在进行下面的演示，希望在控件动态添加到页面时启用代码触发事件

要测试此功能，请单击“添加控件”按钮向文档中添加复选框。现在，shuffle js没有监听复选框的更改

还提供了一个运行的钢笔演示

"严格使用",； var Shuffle=window.Shuffle； 函数arrayIncludesarray，值{ 返回array.indexOfvalue！=-1； } 函数到数组{ 返回Array.prototype.slice.callthing； } var Demo=函数元素{ this.shapes=toArraydocument.querySelectorAll'.js shapes input'； this.shuffle=新的Shuffleelement{ 放松：“立方贝塞尔0.165,0.840,0.440,1.000'，//easeOutQuart sizer:“.sizer”， }; 这是一个过滤器={ 形状：[]， }; 这是.\u bindEventListeners； }; /** *当筛选器更改时绑定事件侦听器。 */ Demo.prototype.\u bindEventListeners=函数{ this.\u onShapeChange=this.\u handleShapeChange.bindthis； this.shapes.forEachfunction输入{ input.addEventListener'change'，this.\u onShapeChange； }这,； }; /** *获取每个选中输入的值。 *@return{Array.} */ Demo.prototype.\u getCurrentShapeFilters=函数{ 返回此.shapes.filterfunction输入{ 返回input.checked； }.mapfunction输入{ 返回input.value； }; }; /** *形状输入检查状态已更改，请更新当前筛选器和filte.r */ Demo.prototype.\u handleShapeChange=函数{ this.filters.shapes=this.\u getCurrentShapeFilters； 这个过滤器； }; /** *根据过滤器的当前状态进行过滤器洗牌。 */ Demo.prototype.filter=函数{ 如果这个.hasActiveFilters{ this.shuffle.filterthis.itemPassesFilters.bindthis； }否则{ this.shuffle.filtersuffle.ALL_项； } }; /** *如果“filters”属性中的任何数组的长度大于零， *这意味着有一个有源滤波器。 *@return{boolean} */ Demo.prototype.hasActiveFilters=函数{ 返回Object.keysthis.filters.somefunction键{ 返回此。筛选器[键]。长度>0； }这,； }; /** *确定元素是否通过当前过滤器。 *@param{Element}要测试的元素。 *@return{boolean}是否满足所有当前筛选器。 */ Demo.prototype.ItemPasseFilters=函数元素{ var shapes=this.filters.shapes； var shape=element.getAttribute'data-shape'； //如果存在活动形状过滤器，且该形状不在该数组中。 如果shapes.length>0&！arrayincludeshapes，shape{ 返回false； } 返回true； }; document.addEventListener'DOMContentLoaded'，函数{ window.demo=newdemodocument.querySelector'.js shuffle'； }; $add-controls.onclick，函数{ $controls.html“形状圆形菱形方形三角形” }; .shape shuffle容器{ 位置：相对位置； 溢出：隐藏；} .形状{ 位置：相对位置； 左边距：0； 页边距顶部：10px；} .shape.shape\u空间{ 宽度：100%； 身高：100%； 背景色：黑色； 边框样式：实心； 边框宽度：0； 边框颜色：透明；} .shape蓝色。shape___空间{ 背景色：3498DB； 边框底色：3498DB；} .形状红色.形状空间{ 背景色：E74C3C； 边框底色：E74C3C；} .shape橙色。shape\u空间{ 背景色：F39C12； 边框底色：F39C12；} .shape绿色。shape\u空间{ 背景色：2ECC71； 边框底色：2ECC71；} .形状圆.形状空间{ 边界半径：50%；} .形状菱形.形状空间{ -webkit变换：旋转45度刻度0.70711； 变换：旋转45度刻度0.70711；} .形状三角形.形状空间{ 填充顶部：9px； 身高：0； 宽度：0； 边框宽度：0 66px 114px 66px； 背景色：透明； 边距：自动；} 添加控件

---

问题是，在初始化demo时，事件侦听器被绑定到不存在的元素。构造函数将其形状和颜色属性设置为null 因为.js形状和.js颜色还不存在，所以事件侦听器没有绑定到任何东西

要解决此问题，可以在动态添加控件后设置形状、颜色和绑定事件侦听器

这是你笔的叉形版本：

唯一的变化是将形状、颜色初始化和事件侦听器绑定移动到一个新函数中，并在添加html控件后调用它

另一个选项是简单地移动设置window.demo=newdemo。。。从加载文档时到添加html控件后

---

第三个选项是将控件html保留在页面上，但隐藏css设置样式为display:none的控件，并使添加控件按钮更改可见性：例如$add-controls.onclick，函数{document.getElementById'controls'.style=display:block}。

这是否回答了您的问题？我已经尝试过添加'document.addEventListener'change'，this.\u onShapeChange；'而不是'input.addEventListener'change'，这是但它不起作用你说它不起作用是什么意思？发生了什么，应该发生什么？好吧，它没有引发任何事件！请看一看钢笔演示，会注意到我的意思吗