javascript - Nested function in jQuery -

i new javascript , jquery. writing following code edit portion of web page. working perfect when click on #edit_case first time after clicking #cancel returns me back. #edit_case not work.. wrong piece of code?

$("#edit_case").click(function(){        var oldhtml = $("#editable").html();     var newhtml;      newhtml = "<div class='panel-body' id='edit_fields'></div> <div class='panel-footer' id='footer-bottons'></div>"     $("#editable").html(newhtml);     $('#footer-bottons').html('<div class="text-right"><button class="btn btn-primary btn-sm" id="save">save</button> <button class="btn btn-default btn-sm" id="cancel">cancel</button></div>');      $("#cancel").click(function(){            $("#editable").html(oldhtml);      }); }); 

my html markup like:

 <div class="panel panel-default" id="editable">      <div class="panel-body">          drop-down code           <li><a id='edit_case'>edit</a><li>           panel-body code...        </div> panel footer </div> 

when click on edit, same text input fields appear on stackoverflow.com. on first time, edit link works fine when cancel edit both edit , delete not work. think click event not occurring have tried check on using alert('test') , isn't appeared after clicking on #cancel. problem of unbinding event? if is, how correct it?

since cancel button not in dom @ first , since removing edit_case, need ".on" put code in loading, not in click event. if put in click event, have multiple event registered.

with working fiddle: https://jsfiddle.net/2hjr6g94/

$(document).on('click','#cancel',function(){           $("#editable").html(oldhtml);     });  var oldhtml = $("#editable").html();  $(document).on('click','#edit_case',function(){       var oldhtml = $("#editable").html();     var newhtml;      newhtml = "<div class='panel-body' id='edit_fields'></div> <div class='panel-footer' id='footer-bottons'></div>"     $("#editable").html(newhtml);     $('#footer-bottons').html('<div class="text-right"><button class="btn btn-primary btn-sm" id="save">save</button> <button class="btn btn-default btn-sm" id="cancel">cancel</button></div>');  });