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

Solution 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);
});

Solution 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

Comments

[amd]

I have tried exactly the same way you have show, however I'm still getting undefined in console.log(). I went one step ahead and found out if i pass <div id=''result'> to a var $msg = $('#result').html(); using console.log ($msg) I could see all the elements. But not sure how to access those elements

[viarnes]

You can access those element by using the jQuery find function: $msg.find('selector'). But accessing an element directly should not make any difference. Are you sure the selector #test1 exists after the ajax call?

[amd]

After viewing the source code I don't see the #test1 selector exits inside the <div id="result> of modal". It does not show since its created dynamically by ajax response html. I wish I could take a screenshot and show it to you.

[viarnes]

How are you appending the ajax response to the html? Can you add the ajax callback code to your question? Maybe you can convert the html response (a string) into real html by doing var $htmlres = $(response.html); followed by $('#result').append($htmlres)

[amd]

FYI checkbox are added after an AJAX call on $('[id*=tile-button]').click event. May be that's is the reason when I try to access the element it say 'UNDEFINED'.