$(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 der Code, wo das div zu reload versucht bin, wenn ich die Refresh clickbutton, geschieht nichts, wie ich bin ein Lernender von jQuery und JS bin nicht mit viel Wissen darüber.

Fiddle Link

Dank

zeasts

Quelle

2016-07-16 Riot Zeast Captain

Gebrauch wie dieses $ ("# MyButton"). Klicken (function(), müssen Sie nicht in Ihrem HTML eine Button-ID haben – Deep

Ich denke, die dort @Deep –

– Deep

Mit jQuery-Version 3 ist die Funktion Last und dem Ereignis Onload werden unterschiedlich behandelt.

Also in Ihrem Code müssen Sie schreiben:

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

Details werfen Sie einen Blick auf jQuery 3.0:

entfernt veraltet Ereignis Aliase

.load, .unload und. Fehler, seit jQuery 1.8 veraltet, gibt es nicht mehr. Verwenden Sie .on(), um Listener zu registrieren.

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

Da Bootstrap v3 nicht kompatibel mit jQuery v3 (siehe bootstrap issues 16834) ist geändert ich jQuery 1.x in meinem Code-Schnipsel.

Mein Schnipsel:

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

Quelle

2016-07-16 16:36:25 gaetanoM

Seine funktioniert nicht, aber in der Konsole wird der Fehler ausgelöst wie 'jquery.min.js: 4 XMLHttpRequest kann nicht geladen werden.(html link) Kreuzursprungsanfragen werden nur für Protokollschemata unterstützt: http, data, chrome, chrome-extension, https, chrome-extension-resource.' –

@RiotZeastCaptain Für Bootstrap 3.3.6 kann jQuery 3.x nicht verwendet werden. Also habe ich mein Snippet auf jQuery 1.x aktualisiert. Versuche es jetzt und lass es mich wissen. – gaetanoM

Die Load-Methode fordert einige Inhalte vom Server und legt sie in der div, dass Sie es fordern. Ein Beispiel für seine Verwendung könnte sein:

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

Quelle

2016-07-16 16:40:01

Versuchen Sie in Ihrem lokalen Rechner diesen Code:

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

Blick auf die API diese besser zu verstehen. Seine Arbeit in meinem 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>

Quelle

2016-07-16 16:54:21

Onclick die div nachladen nur

zeasts

Antwort

Onclick die div nachladen nur

zeasts

Antwort

Verwandte Themen