Onclick仅重新加载div [英] Onclick reload the div only

问题描述

$(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时试图将div划分为reload时，什么都没有发生，因为我是jQuery和JS的学习者，对此一无所知.

Heres the code where am trying to reload the div when I click the Refresh button, nothing is happening, as I am a learner of jQuery and JS am not having much knowledge about this.

小提琴链接

谢谢

推荐答案

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

With jQuery version 3 the function load and the event onload are handled differently.

因此，在您的代码中，您需要编写:

So in your code you need to write:

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

有关详细信息，请查看

For details take a look to jQuery 3.0:

已删除不赞成使用的事件别名

Removed deprecated event aliases

.load，.unload和.error.使用.on()注册侦听器.

.load, .unload, and .error, deprecated since jQuery 1.8, are no more. Use .on() to register listeners.

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

因为Bootstrap v3与jQuery v3不兼容(请参阅 bootstrap问题16834 )我在代码段中更改为jQuery 1.x.

Because Bootstrap v3 is not compatible with jQuery v3 (refer to bootstrap issues 16834) I changed to jQuery 1.x in my snippet.

我的代码段:

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

这篇关于Onclick仅重新加载div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！