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

Question

I am dynamically creating HTML radio buttons where I am assigning the Id of the input tag to a variable. I want to append a click event handler to these radio buttons using the Id I have assigned. How do I properly use the Id I created to generate a click event? Right now, the event is not being triggered at all.

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);
    })
})

})

I am using the console.log to test if the method was being hit but I am getting empty results. I know the keys are correct because the radio buttons are being created.

Any help would be appreciated.

Thank you.

Answer 1

The problem is that the id added is key/ not key . You should leave a space between " and the closing of the input tag. Or use template literals.

See below

 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); }) }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="studentToggle"> </div> 

Answer 2

If you use event delegation, you never have to add extra event handlers to options as long as their parent does not change:

 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>