JavaScript事件侦听器在单选按钮上的标签上的行为不同

我试图在JavaScript中动态地向一组按钮添加事件侦听器。但是，只有在单选按钮中单击实际的圆形按钮，而不是按钮的标签时，该功能才会正确启动

功能设置RadioBackground（someCard）{
someCard.querySelectorAll（“.form check input”）.forEach（（子项）=>{
日志（“初始测试”，someCard）；
addEventListener（“单击”，函数（）{
控制台日志（someCard）；
shadeBackground（someCard，child）；
})
})
}

当函数最初运行时，它会正确显示事件侦听器添加到的卡，并带有

initial test

。但是，当我在匿名事件侦听器函数中记录

someCard

时，会得到不同的结果。如果单击标签，它将记录添加了事件侦听器的第一张someCard。但是，如果我单击圆形按钮，它将记录正确的卡，并且

shadeBackground

功能正常工作

有没有办法让标签同样影响正确的卡片

最小可再现示例

要重现问题，请使用按钮添加两张（或更多）卡。单击第二张卡的无线电输入和标签。单击无线电输入将正确选择它，而单击标签将选择第一张卡的相应无线电输入。（使用“完整页面”按钮，以更好地显示输出。）

const-button=document.querySelector（“单击我”）；
设计数器=0；
addEventListener（“单击”，函数（）{
const card=document.createElement（“div”）；
card.className=“card”；
card.id=`demoCard-${counter}`；
card.innerHTML=`
卡片标题
默认无线电
第二默认收音机
`
文档查询选择器（“.output”）.appendChild（卡片）；
document.querySelector（`demoCard-${counter}`）.queryselectoral（“.form check”）.forEach（（子项）=>{
addEventListener（“change”，function（））{
log（“您已单击”，孩子）；
})
})
计数器+=1；
})

点击我

您的代码中存在多个问题：

您在同一表单上拥有多个具有相同id的控件。请使用以下代码更新卡的内部HTML，以便每张卡的单选按钮具有不同的名称和id：

card.innerHTML=`
默认无线电
第二默认收音机
`

您希望为特定元素添加事件侦听器，而不是一次又一次地为所有更改事件添加事件侦听器。更改：

document.querySelector（`demoCard-${counter}`）.queryselectoral（“.form check”）.forEach（（child）=>{
addEventListener（“更改”，函数（）{
log（“您已单击”，孩子）；
})
})

致：

document.querySelector（`demoCard-${counter}`）.queryselectoral（“.form check”）.forEach（（child）=>{
addEventListener（“change”，function（））{
log（“您已单击”，孩子）；
})
})

这会解决你的问题

之后，您的表单将按预期工作：

const-button=document.querySelector（“单击我”）；
设计数器=0；
addEventListener（“单击”，函数（）{
const card=document.createElement（“div”）；
card.className=“card”；
card.id=`demoCard-${counter}`；
card.innerHTML=`
卡片标题
默认无线电
第二默认收音机
`
文档查询选择器（“.output”）.appendChild（卡片）；
document.querySelector（`demoCard-${counter}`）.queryselectoral（“.form check”）.forEach（（子项）=>{
addEventListener（“change”，function（））{
log（“您已单击”，孩子）；
});
});
计数器+=1；
})

点击我

主要问题是您在运行时使用了相同的id：

card.innerHTML=`
卡片标题
默认无线电
第二默认收音机
`

每一张新卡将使用

id=“examplereadios1”

和

id=“examplereadios2”

作为其收音机。id应该是标识单个元素的标识符。浏览器也会执行此假设，因此当您使用

for=“examplereadios1”

引用id时，它将始终使用

id=“examplereadios1”

引用第一个元素

你可以用多种方法解决这个问题。最简单的方法不是为分配id和，而是用

包装

card.innerHTML=`
卡片标题
默认无线电
第二默认收音机
`

这不应该是一个

更改

侦听器吗<代码>单击通常是实际的鼠标单击事件。尽管

元素也会触发一个

事件，例如，如果您通过Enter或空格键按下它，则单击它。@VLAZ感谢您的建议。我已将其更改为
change
侦听器，但仍然存在相同的行为。您如何从DOM中选择
someCard
？您是否可以添加一个带有？由于缺少相应的HTML，很难看到您的示例中实际发生了什么。@3limin4t0r这是不可行的，它是可验证的。