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

Question

Jquery and Bootstrap modal code on the same page lets you 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. The DIV receives the html ajax response, and the elements are drawn dynamically. And after the elements are drawn in this case, check the box. On the saveChange button, click on modal, I want to get the value of the checkbox.

 $("#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 was able to access elements from another DIV outside the modal

Answer 1

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

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

Answer 2

My decision to check if the checkbox was checked or not is simple. I just created a class and was able to easily check if the checkbox was checked or not in the bootstrap module

.

$ ('class name') is (': checked'); // works. $ ('# ElementId') is (': checked'); // gives false always