html - A label tag wrapped around a radio button prevents the radio button from responding to a "change" event listener in JavaScript -

Problem

I have some dynamically-generated HTML (JavaScript) in which there is a form with some radio buttons in it. I've added event listeners (using the "change" ) to call the function on all radio buttons whenever their value changes I already know that this event only Triggers only when the button goes from " checked " value false to true , and not on the other side

To make my code simpler, I've wrapped the input tag around the label tag so that I Can not generate a group of unique IDs for the ID button However, when the label tag is around in the same radius instead of sitting in the form of a radio input, the radio input is wrapped, the "change "Event listener does not answer, even if you click directly on the button.

Example

I put a JSWD example and showed what I'm talking about. The first group (which does not work) is generated in this way:

 for  (var i = 0; i & lt; 3; i ++) {var label = document. CreateElement ("label"); Var radio = document.createElement ("input"); Radio.SetTV ("Type", "Radio"); Radio.SetAttribute ("name", "group1"); Radio.addEventListener ("change", function () {warning ("group 1 changed!")}, False); Label.appendChild (radio); Label.innerHTML + = "radio" + (i + 1); Var br = document.createElement ("br"); G1.appendChild (label); G1.appendChild (br); }   
 and the second group (which works) is generated like this:  
 for  (var i = 0; i <3 ; I ++) {Var radio = document.createElement ("Input"); Radio.SetTV ("Type", "Radio"); Radio.SetAttribute ("name", "Group 2"); Radio. SetAttivat ("ID", "G2R" + i); ;); Label.setExtribute ("for", "G2 R "+ i); Label.innerHTML =" radio "+ (i + 1); var br = document.createElement (" br "); g2.appendChild (radio); g2.appendChild (label); g2.appendChild ( B);}   
 question  
 Is this a known bug or something else? And is there any kind of solution? I would like to put the wrapped label because it is easy to generate And I think this is cleaner, but not at the cost of functionality, h  
 Thank you!   
 
 
 I removed this line:  
  label.innerHTML + = "radio" + (i + 1); from your jsfiddle   
 and this fixes the problem, it will break your code The reason is that when you use the internal element to add something inside the other element, that is actually changing all the contents of that element, of course, when you use, what you already do Were keeping it together You were essentially copying the content, adding them, and then building new domes for all the HTML which you are adding back in - whether it is old content or new This means that any handler associated with the old materials will be lost, because you are overwriting them with new DOM elements.  
 If you replace this line with:  
  Label.appendChild (document.createTextNode ("radio" + (i + 1));   
 This will add new text nodes that you are creating without deleting your existing elements and creating them, so your handlers will still be there! Here's a working jsFiddle:.