jquery - .click stops working after using replaceWith -

okay, have been stuck on little while now...

basically have 2 way want div displayed. planning on creating function replacewith() replacing #maindiv version of #maindiv.

here function:

function switchtochoice(){             $('#mycanvas2').replacewith('<div id="yesbox" width="150" height="90"><img id="yes" src="yes-button.png" width="110" height="55"></div><div id="nobox" width="150" height="90"><img id="no" class src="no-button.png" width="110" height="55"></div>');          } 

this works , creates div box want when called. div box has 2 images in it, clickable, click actions not performed.

this piece of code not working after replacewith:

//if user presses next button on comment pages.         $('#next').click(function() {             $('#next').fadeto(100, 0.25, function(){                 clearcanvas(ctx, c);                 wraptext(ctx, questionlist[textpos], x, y-20, 275, 15);                 textpos++;             });             switchtochoice();             $('#next').fadeto(100, 1);         });          //if user presses yes button on question pages.         $('#yes').click(function() {             alert("boobs");             $('#yes').fadeto(100, 0.25, function(){                 clearcanvas(ctx, c);                 wraptext(ctx, questionlist[textpos], x, y-20, 275, 15);                 textpos++;             });             $('#yes').fadeto(100, 1);         });          //if user presses no button on question pages.         $('#no').click(function() {             $('#no').fadeto(100, 0.25, function(){                 clearcanvas(ctx, c);                 wraptext(ctx, questionlist[textpos], x, y-20, 275, 15);                 textpos++;             });             $('#no').fadeto(100, 1);         }); 

my guess lost when html replaced, don't know what. new jquery , have done research possible, seems going in circles. can help?

you creating elements dynamically, need use event delegation using on.

your events attached elements existing in dom @ time. need use delegated event attaching event document or parent element exists @ point in time. can using on()

     $(document).on('click', '#next', function() {         $(this).fadeto(100, 0.25, function(){             clearcanvas(ctx, c);             wraptext(ctx, questionlist[textpos], x, y-20, 275, 15);             textpos++;         });         switchtochoice();         $(this).fadeto(100, 1);     });      //if user presses yes button on question pages.     $(document).on('click','#yes', function() {         alert("boobs");         $(this).fadeto(100, 0.25, function(){             clearcanvas(ctx, c);             wraptext(ctx, questionlist[textpos], x, y-20, 275, 15);             textpos++;         });         $(this).fadeto(100, 1);     });      //if user presses no button on question pages.      $(document).on('click','#no', function() {         $(this).fadeto(100, 0.25, function(){             clearcanvas(ctx, c);             wraptext(ctx, questionlist[textpos], x, y-20, 275, 15);             textpos++;         });         $(this).fadeto(100, 1);     });