title: Cannot access element id's in bootstrap modal using jquery, getting undefined error
body: <p>Jquery and Bootstrap modalbox code is in same page lets say index.php</p>
  
  
  
  <pre><code>&lt;div class="modal fade" id="tileModal" tabindex="-1" role="dialog" aria- 
                      labelledby="mytileModal" aria-hidden="true"&gt;
            &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                &lt;div class="modal-header"&gt;&lt;button type="button" class="close" 
  data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;Select Tiles&lt;/h4&gt;
                &lt;/div&gt;
                &lt;div class="modal-body"&gt;
                 &lt;div id="result"&gt; &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;button type="button" class="btn btn-primary" id="saveChange"&gt;Save changes&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>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. </p>
  
  <pre><code>$("#saveChange").click(function () {
      var midVal = $('#test1').val();
      console.log(midVal);
  });
  </code></pre>
  
  <p><strong>Getting undefined</strong></p>
  
  <p>Not Sure why I cannot access modal elements from the same page. However Im able to access elements from other DIV outside modal</p>