【问题标题】：Onclick reload the div onlyOnclick 仅重新加载 div
【发布时间】：2016-11-19 16:08:48
【问题描述】：

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

当我 click 刷新 button 时，这里是我尝试 reload div 的代码，没有任何反应，因为我是 jQuery 的学习者，而 JS 对此知之甚少。

Fiddle链接

谢谢

热情

【问题讨论】：

像这样使用 $("#MyButton").click(function() ，你的 html 中没有 Button id
我认为它在那里@Deep
对不起，我修改了，忘记更新了，马上更新……谢谢
Fiidle jsfiddle.net/hztzketh/5 您可能有用户旧版本（

标签： javascript jquery html twitter-bootstrap

【解决方案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）我在我的 sn-p 中改为 jQuery 1.x。

我的sn-p：

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

【讨论】：

它不工作，但在控制台中它触发错误为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.
@RiotZeastCaptain 对于引导程序 3.3.6，您不能使用 jQuery 3.x。所以我将我的 sn-p 更新为 jQuery 1.x。现在试试，让我知道。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：