Question

我正在尝试执行以下操作。

<button data-target="#myModal" data-toggle="modal" type="button" class="btn btn-primary">Details</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div class="bodyContent"></div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  </div>
</div>

$('#myModal').on('shown.bs.modal', function (e) {
  $('.bodyContent').load('http://www.google.com');
 })

但是，当我单击按钮并加载模型时，内容为空白。我不确定我在做什么错吗？我已经尝试了很多不同的方法，但这应该是正确的。

Answer 1

通常，当您调用.load()时，您希望有一个回调函数将内容实际放入其中。例如，以下代码将很适合您：

$('body').load(url, function(responseTxt, statusTxt, xhr){
   $('.bodyContent').html(responseTxt);
});

此外，JQuery的缩小版本中没有.load()函数。只有完整版本具有该功能。您只应加载完整版本，而不能一次加载两个不同的版本！

更新：我有一个工作正常的JSFiddle代码段。单击按钮时，您应该看到Use POST method for /echo/html, see http://doc.jsfiddle.net/use/echo.html。但这仍然是一个合法的答案：）

LINK

您唯一需要加载的JQuery是最新版本。也不要“苗条”。缩小（“ min”）很棒，可以这样做，但不要苗条。下面的代码效果很好：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQuery LOAD和Bootstrap 4问题

1 个答案: