javascript - Onclick reload the div only

Question

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

Answer 1

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, and .error, deprecated since jQuery 1.8, are no more. Use .on() to register listeners.

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

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

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>