问题

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

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.

Fiddle link

Thanks

zeasts

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

回答2:

Try this code in your local machine. Its working in my browser

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

The load method requests some content from the server and places it in the div that you call it on. An example of its use could be:

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

Look at the API to understand this better:

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

来源：https://stackoverflow.com/questions/38413200/onclick-reload-the-div-only

标签

javascript

jquery

html

twitter-bootstrap

Onclick reload the div only

问题

zeasts

回答1:

回答2:

回答3: