时间戳

首页 > 解决方案 > jquery LOAD 和 bootstrap 4 问题

jquery - jquery LOAD 和 bootstrap 4 问题

问题描述

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

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

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

标签： jqueryhtmlbootstrap-4

解决方案

通常，当您调用 时.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在单击按钮时看到。不过，这仍然是一个合法的答案:)

关联

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

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

推荐阅读