GetElementById 无法从引导程序模态弹出窗口中单击按钮

如何解决GetElementById 无法从引导程序模态弹出窗口中单击按钮

我正在开发一个 ASP .NET 应用程序，其中用户单击相机按钮并打开一个模式弹出窗口，其中相机加载（使用网络摄像头 js）。到目前为止，该应用程序运行良好。

现在在模式弹出窗口中，我有一个“拍照”按钮，单击它后我想捕获照片并将其显示在连接网络摄像头的同一个“PopupCam”元素上。我正在尝试使用 Webcam.snap 功能。

但是捕获的图像无法附加到“PopupCam”div。我可以看到函数正在被调用（因为我测试了 alert('hello') 并且它正在工作）但不知何故 GetElementById 来附加捕获的图像不起作用。

这是我的模态 html 和我正在使用的 javascript。

我正在使用 show.bs.modal 事件在模态启动时加载相机。哪个工作正常。 但是点击“btnCapture”按钮后，捕获的图像没有被附加。 即使我不使用 webcam.snap 功能并尝试附加任何随机图像，它现在也可以工作。 加载在“PopupCam”div 上的相机保持原样。

$(document).on('show.bs.modal','#camera-modal',function(event) {
  Webcam.set({
    width: 1040,height: 558,image_format: 'jpeg',jpeg_quality: 90
  });
  Webcam.attach('#PopupCam');
})

$(document).on('hide.bs.modal',function(event) {
  Webcam.reset('#PopupCam');
});

$(document).on('click','#btnCapture',function(event) {
  alert('hello');
  Webcam.snap(function(data_uri) {
    document.getElementById('PopupCam').innerHTML =
      '<img src="' +
      data_uri +
      '"/>';
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="camera-modal" class="modal fade">
  <div class="modal-dialog" style="width:auto; margin-top: 0.5%; margin-bottom: 0.5%; margin-left:0.5%;">
    <div class="modal-content">
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm-10 text-center">
              <div id="PopupCam"></div>
            </div>
            <div class="col-sm-2 text-center">
              <asp:button runat="server" id="btnCapture" class="btn btn-warning" style="width:100px;" text="Take Picture" />
              <p></p>
              <asp:button runat="server" id="btnCancel" class="btn btn-default" data-dismiss="modal" style="width:100px;" text="Cancel" />
              <p></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

那个 alert('hello') 出现了，但图像没有附加到“PopupCam”元素

我怎样才能让它工作？

（我有另一个代码，我正在做同样的事情，但不是来自模态弹出窗口，而是来自普通页面并且工作正常）

提前致谢！