Javascript 如何正确注册单选按钮上的单击事件？

我动态地创建HTML单选按钮，将输入标记的Id分配给变量。我想使用我分配的Id将单击事件处理程序附加到这些单选按钮。如何正确使用我创建的Id生成单击事件？目前，事件根本没有被触发

generateDynamicHTML(function (structure) {
let keys = Object.keys(structure);
keys.forEach(function(key){
    let radioButton = $("<input type='radio' name='studentName' id=" + key + "/><label for=" + key + ">" + key + "</label>");
    radioButton.appendTo('#studentToggle')

    $("#" + key).click(function () {
        console.log(key);
    })
})

generatedDynamicHTML（函数（结构）{
设keys=Object.keys（结构）；
键。forEach（功能（键）{
让radioButton=$（“”+键+“”）；
radioButton.appendTo（“#studentToggle”）
$（“#”+键）。单击（函数（）{
控制台日志（键）；
})
})

})

我正在使用console.log测试该方法是否被命中，但得到的结果是空的。我知道键是正确的，因为单选按钮正在创建中

任何帮助都将不胜感激

---

谢谢。

问题是添加的id是

key/

而不是

key

。您应该在

“

和输入标记的结束之间留一个空格。或者使用模板文本

见下文

const结构={
"第一":1,，
“第二”：2
}
设keys=Object.keys（结构）；
键。forEach（功能（键）{
让radioButton=$（“”+键+“”）；
//或模板文本
//让radioButton=$（`${key}`）；
radioButton.appendTo（“#studentToggle”）
$（“#”+键）。单击（函数（）{
控制台日志（键）；
})
})

---

如果使用事件委派，只要选项的父级不发生更改，就不必向选项添加额外的事件处理程序：

const generateDynamicHTML=函数（结构）{
返回对象
.钥匙（结构）
.map（功能（键）{
返回“”+键+“”；
})
.加入（“”）；
};
常量字段=$（“#学生字段”）；
//在任何收音机之前添加单击处理程序
字段。在（'click'，'input[type=“radio”]”上，函数（事件）{
console.log（event.target.id）；
});
//添加收音机，单击按钮仍然有效
字段。追加（生成动态HTML({
约翰：{“年龄”：21}，
“简”：{“年龄”：20}
}));
//添加更多收音机
字段。追加（生成动态HTML({
“戴夫”：{“年龄”：21}，
“乔”：{“年龄”：19}
}))；

学生

我通常只需将一次单击处理程序放在一个不会更改的父元素上。然后，您可以使用event.target来检测是否单击了输入。这样，您可以添加任意多个选项，而无需向每个选项添加事件处理程序。此外，由于它是一个单选按钮，您可能需要“更改”而不是“单击”，类似于

$（parentContainer）.on（'change'，'input[type=“radio”]”，function（）{}）

引用属性值是明智的，谢谢您的回答，但是似乎仍然没有使用模板文本触发click事件。嗯..当您单击元素时，id显示在控制台中。这不是您想要的吗？这与我想要的非常接近，谢谢。没有打印目标，而是有一个w如何检索所选键的值？我很抱歉偏离了最初的问题。当然。event.target只是单击的单选按钮。因此，您可以从中获取任何值或属性。或者将其包装为$（event.target）然后从那里继续，就好像你在id上选择了它一样。我想你甚至可以使用

this

来指代收音机。问题是，单击收音机的值总是“开”，因此它不会告诉我你是否想要它。