zeasts

Question

＆＃13;

$(window).load(function() {      
  $("#Button").click(function() {
    alert('clicked')
    $("#div").load(" #div > *");
  });
});

＆＃13;

<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>

＆＃13;

当我reload刷新click时，我正在尝试button div的代码，没有任何事情发生，因为我是jQuery的学习者，JS没有太多的知识关于这个。

Fiddle链接

由于

zeasts

Answer 1

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

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

$(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 issues 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>

Answer 2

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

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

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

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

Answer 3

在本地计算机上试用此代码。它在我的浏览器中工作

<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>

Onclick仅重新加载div

zeasts

3 个答案: