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

Question

Jquery and Bootstrap modalbox code is in same page lets say 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 is getting ajax response html and elements are drawn dynamically. And after the elements are drawn in this case checkbox . On saveChange button click on modal I want to get checkbox value.

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

Getting undefined

Not Sure why I cannot access modal elements from the same page. However Im able to access elements from other DIV outside modal

Answer 1

Attach your event to a container instead to the element directly. Also use on('click', ... instead of click directly.

$("#tileModal").on('click', '#saveChange', function () {
    var midVal = $('#test1').val();
    console.log(midVal);
});

Answer 2

My solution to check if the check box was checked or not was simple. I just created class and was able to easily check if checkbox was checked or not in the bootstrap modal

$('.className').is(':checked'); // works $('#elementId').is(':checked'); // gives false always