Cannot access element id's in bootstrap modal using jquery, getting undefined error -

jquery , bootstrap modalbox code in same page lets index.php

<div class="modal fade" id="tilemodal" tabindex="-1" role="dialog" aria-                      labelledby="mytilemodal" aria-hidden="true">           <div class="modal-dialog">             <div class="modal-content">               <div class="modal-header"><button type="button" class="close"  data-dismiss="modal" aria-hidden="true">×</button>                 <h4 class="modal-title">select tiles</h4>               </div>               <div class="modal-body">                <div id="result"> </div>               </div>               <div class="modal-footer">                 <button type="button" class="btn btn-default" data-dismiss="modal">close</button>                 <button type="button" class="btn btn-primary" id="savechange">save changes</button>               </div>             </div>           </div>         </div> 

note: div getting ajax response html , elements drawn dynamically. , after elements drawn in case checkbox . on savechange button click on modal want checkbox value.

$("#savechange").click(function () {     var midval = $('#test1').val();     console.log(midval); }); 

getting undefined

not sure why cannot access modal elements same page. im able access elements other div outside modal

attach event container instead element directly. use on('click', ... instead of click directly.

$("#tilemodal").on('click', '#savechange', function () {     var midval = $('#test1').val();     console.log(midval); });