Question

我正在动态创建HTML单选按钮，在其中将输入标签的ID分配给变量。我想使用我分配的ID将click事件处理程序附加到这些单选按钮。如何正确使用我创建的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);
    })
})

}）

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

任何帮助将不胜感激。

谢谢。

Answer 1

问题是添加的ID是required而不是key/。您应该在key和输入标签的结束之间留一个空格。或使用模板文字。

见下文

const structure = {
  'first': 1,
  'second': 2
}

let keys = Object.keys(structure);
keys.forEach(function(key) {
  let radioButton = $("<input type='radio' name='studentName' id=" + key + " /><label for=" + key + ">" + key + "</label>");
  
  // or template literals
  // let radioButton = $(`<input type='radio' name='studentName' id=${key} /><label for=${key}>${key}</label>`);
 
  radioButton.appendTo('#studentToggle')
  $("#" + key).click(function() {
    console.log(key);
  })
})

Answer 2

如果您使用事件委派，则只要父项不变，就不必在选项中添加额外的事件处理程序：

const generateDynamicHTML = function( structure ) {
  return Object
    .keys( structure )
    .map(function( key ) {
      return '<input type="radio" name="studentName" id="' + key + '"/><label for="' + key + '">' + key + '</label>';
    })
    .join( '' );
};
    
const fields = $( '#student_fields' );
//  Add the click handler before any radios
fields.on( 'click', 'input[type="radio"]', function( event ) {
  console.log( event.target.id );
});
//  Add the radios, the click stil works
fields.append( generateDynamicHTML({
  "john": { "age": 21 },
  "jane": { "age": 20 }
}));
//  Add more radios
fields.append( generateDynamicHTML({
  "dave": { "age": 21 },
  "joe": { "age": 19 }
}));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset id="student_fields">
  <legend>Students</legend>
</fieldset>

如何在单选按钮上正确注册点击事件？

2 个答案: