javascript - using .wrapInner instead of .show() -

Newbie here While trying to hide the original element, I am trying to use jquery wrapInner to show the next choice for the user. here is my .

Once I support the radio button it hides the elements in the middle. Cancel buttons show elements back. But nothing is happening again on supporting the radio button.

Any help on this will be appreciated!

html:

  & lt; Div id = "ngir-action" & gt; & Lt; Div id = "engr-choice" & gt; & Lt; Input id = "support" class = "angre-choice" type = "radio" name = "encoder-pick" /> & Lt; Label for = "endorse" & gt; Endorsement & lt; / Label & gt; & Lt; Input id = "encode" class = "engr-option" type = "radio" name = "encoder-pick" /> & Lt; Label = "encoded" & gt; Encoded & lt; / Labels & gt; & Lt; / Div & gt; & Lt; Button ID = "Cancel-action" & gt; Cancel & lt; / Button & gt; & Lt; / Div & gt;   
 jquery:  
  $ (function () {$ ('# engr-choice'). ButtonTit (); $ ('# cancel-action '$' ('# Endorse-edit'). Hide (); $ ('# engr-' Label '' Ender ID '' Enter ID = "NAR-option" type = "radio" name = "Encoder-pick" /> for choice 'Android' & gt; Endorsement & lt; / label & gt; $ '(' # Engr-like input '). RemoveAttr (' check '); $ (' # engr-choice '). Buttonset (' refresh '); returning false;}); $ (' # endorse ' '.click (function () {$ (' # engr-choice ') .HTML (' '); $ (' # engr-choice '). WrapInner (' & lt; div id = "support-edit" Gt; & lt; A href = "" & gt; Edit & lt; / a & gt; & lt; / div & gt; '); $ (' # endorse-edit '). Button (); Return false;});} );    
 
 
 Since your element is generated "on the fly", via javascript , Your  $ ('# support'). Click (..  the event will not work because the element was not present on the DOM, so to add events to your elements, when you fly, you The event will need to be delegated, then the environment Tn:  
  $ ( '# support "). Click (function () {.   
 to  
  $ (document) .on ('click', '# endorse', function () {...}   
 View ::