Onclick 仅重新加载 div

IT技术 javascript jquery html twitter-bootstrap
2021-02-20 10:09:52 

$(window).load(function() {      
  $("#Button").click(function() {
    alert('clicked')
    $("#div").load(" #div > *");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<button id="Button" class="btn btn-warning">Refresh</button>
<div class="col-md-3" id="div">

  <div class="alert alert-warning alert-dismissible fade in" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">×</span>
    </button>
    <strong>Holy guacamole!</strong>
  </div>
  <div class="alert alert-danger alert-dismissible fade in" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">×</span>
    </button>
    <strong>Holy guacamole!</strong>
  </div>
  <div class="alert alert-success alert-dismissible fade in" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">×</span>
    </button>
    <strong>Holy guacamole!</strong>

  </div>
</div>

这是reload我click在 Refresh时尝试div的代码button，什么也没有发生，因为我是 jQuery 的学习者，而 JS 对此并不了解。

小提琴链接

谢谢

热情

3个回答

在 jQuery 版本 3 中，函数加载和事件加载的处理方式不同。

所以在你的代码中你需要写：

$(window).on('load', function (e) {

有关详细信息，请查看jQuery 3.0：

删除了不推荐使用的事件别名

.load、.unload 和 .error，自 jQuery 1.8 起已弃用，不再使用。使用 .on() 注册监听器。

https://github.com/jquery/jquery/issues/2286

由于 Bootstrap v3 与 jQuery v3 不兼容（请参阅bootstrap 问题 16834），我在代码片段中更改为 jQuery 1.x。

我的片段：

$(window).on('load', function (e) {
  $('#MyButton').on('click', function (e) {
    alert('clicked')
    $("#div").load(" #div > *");
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<button id="MyButton" class="btn btn-warning">Refresh</button>
<div class="col-md-3" id="div">

    <div class="alert alert-warning alert-dismissible fade in" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
        <strong>Holy guacamole!</strong>
    </div>
    <div class="alert alert-danger alert-dismissible fade in" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
        <strong>Holy guacamole!</strong>
    </div>
    <div class="alert alert-success alert-dismissible fade in" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
        <strong>Holy guacamole!</strong>

    </div>
</div>

@RiotZeastCaptain 对于 bootstrap 3.3.6，您不能使用 jQuery 3.x。所以我将我的代码段更新为 jQuery 1.x。现在试试，让我知道。
2021-04-26 10:09:52
它不起作用，但在控制台中它触发了错误 jquery.min.js:4 XMLHttpRequest cannot load.(html link) Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
2021-05-15 10:09:52

在本地机器上试试这个代码。它在我的浏览器中工作

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </head>
    <body>

        <button id="MyButton" class="btn btn-warning">Refresh</button>
        <div class="col-md-3" id="div">

            <div class="alert alert-warning alert-dismissible fade in" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <strong>Holy guacamole!</strong>
            </div>
            <div class="alert alert-danger alert-dismissible fade in" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <strong>Holy guacamole!</strong>
            </div>
            <div class="alert alert-success alert-dismissible fade in" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <strong>Holy guacamole!</strong>

            </div>
        </div>
        <script type="text/javascript">
        $(window).on('load', function (e) {
            $('#MyButton').on('click', function (e) {
                alert('clicked')
                $("#div").load(" #div > *");
            });
        });
        </script>
    </body>
</html>

load 方法从服务器请求一些内容并将其放置在您调用它的 div 中。其使用示例可能是：

$("#IdOfElementToPutContentIn").load("urlToGrabDataFrom")

查看 API 以更好地理解这一点：

http://api.jquery.com/load/

其它你可能感兴趣的问题
上一篇JavaScript 中的 IIFE 调用 下一篇从前端 JavaScript 代码获取 Spotify API 访问令牌