无法使用jquery访问bootstrap模式中的元素id,获取未定义的错误

Question

Jquery和Bootstrap modalbox代码在同一页面中让我们说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>

注意:DIV正在获取ajax响应html并且动态绘制元素.在这种情况下绘制元素后复选框.在saveChange按钮上单击模态我想获取复选框值.

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

未定义

不确定为什么我无法从同一页面访问模态元素.但是我能够从模态外的其他DIV访问元素

Answer 1

将事件附加到容器而不是直接附加到元素.也可以on('click', ...代替click直接使用.

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