jquery - Javascript - replacing a div with another random div (buttons not working in the new div) -

my overall objective create test based on images. stuck @ stage. idea image appears , user has click on button choose correct answer. ever button click, image replaced randomly image. problem having, when image replaced randomly new image, buttons (in same div new image) not work. user can use buttons in first div , when div replaced, can't past new random div. new forum.. grateful if can me.

here html.

<div id = 'suitcase'>     <img src ='https://upload.wikimedia.org/wikipedia/commons/c/ce/suitcase_750x500.jpg' width = '400'/>     <ul> <button id = 'correct1'> suitcase </button>  &nbsp; &nbsp; <button class = 'incorrect1'> backpack </button> &nbsp; &nbsp; <button class = 'incorrect1'> handbag </button> </ul> </div>;  <div id = 'printer'>     <img src = 'http://cdn2.pcadvisor.co.uk/cmsdata/reviews/3598061/hp_envy_5640_e-all-in-one.jpg' width = '400'/>     <ul> <button id = 'correct2'> printer </button>  &nbsp; &nbsp; <button class = 'incorrect2'> photocopier </button> &nbsp; &nbsp; <button class = 'incorrect2'> computer </button> </ul> </div>;  <div id = 'desk'>    <img src = 'https://www.directofficesupply.co.uk/components/com_virtuemart/shop_image/product/h4p3.jpg' width = '400'/>    <ul> <button class = 'incorrect3'> printer </button>  &nbsp; &nbsp; <button class = 'correct3'> desk </button> &nbsp; &nbsp; <button class = 'incorrect3'> computer </button> </ul> </div> 

here javascript , jquery

$(window).load(function() {   $("#printer").hide(); });  $(window).load(function() {   $("#desk").hide(); });  var image1 = document.getelementbyid("desk").innerhtml; var image2 = document.getelementbyid("suitcase").innerhtml; var image3 = document.getelementbyid("printer").innerhtml;  var imagelist = [image1, image2, image3]  function getrandomimage() {   var random = imagelist[math.floor(math.random() * imagelist.length)];   return random; }  var randomimage = getrandomimage();   $("#correct1").click(function() {   $(this).css({     "background": "blue"   });   settimeout(function() {     $("#suitcase").html(randomimage);   }, 500);    $("#correct2").click(function() {     $(this).css({       "background": "blue"     });     settimeout(function() {       $("#printer").html(randomimage);     }, 500);   });    $("#correct3").click(function() {     $(this).css({       "background": "blue"     });     settimeout(function() {       $("#desk").html(randomimage);     }, 500);   });  });  $(".incorrect1").click(function() {   $(this).css({     "background": "red"   });   settimeout(function() {     $("#suitcase").html(randomimage);   }, 500); });   $("#correct2").click(function() {   $(this).css({     "background": "blue"   });   settimeout(function() {     $("#printer").html(randomimage);   }, 500); });  $(".incorrect2").click(function() {   $(this).css({     "background": "red"   });   settimeout(function() {     $("#printer").html(randomimage);   }, 500); });  $("#correct3").click(function() {   $(this).css({     "background": "blue"   });   settimeout(function() {     $("#desk").html(randomimage);   }, 500); });  $(".incorrect3").click(function() {   $(this).css({     "background": "red"   });   settimeout(function() {     $("#desk").html(randomimage);   }, 500); }); 

what doing wrong??!!

the way wrote codes, buttons loaded document known. generated buttons wouldn't known. have use .on or .delegate

i write sample here. can change of yours.

the way can use .on :

$("#correct2").on('click', function(){     $(this).css({         "background": "blue"     });settimeout(function(){         $("#printer").html(randomimage);     },     500); }); 

the way can use .delegate (which deprecated in jquery v3):

$('body').delegate('#correct2', 'click', function(){     $(this).css({         "background": "blue"     });settimeout(function(){         $("#printer").html(randomimage);     },     500); });