Karte Einlegen.. mit Hilfe von jquery in der bootstrap-4 mit Daten-laden-text

Ich versuche zu erreichen, laden-Effekt für eine Schaltfläche, die, wie gezeigt, in codepen.

Ich bin mit bootstrap 4 (beta 2) Jquery 3.2.1.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Group View</title>
    <link rel="stylesheet" media="all" href="../css/bootstrap.css" >
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap-bundle.js"></script>
</head>
<body>

  <div>
    <button type="button" class="btn btn-primary btn-lg">Submit Order</button>
  </div>

  <script>
    $(document).ready(function() {
      $('button').data('loading-text', 'loading...');
      $('.btn').on('click', function() {
        var $this = $(this);
        $this.button('loading');
        setTimeout(function() {
          $this.button('reset');
        }, 8000);
      });
    })
  </script>
</body>
</html>

Dem obigen code wird nicht angezeigt "wird geladen...", wenn die Schaltfläche geklickt wird.

Es müssen die Pfade für entweder jQuert oder BS. Überprüfen Sie Ihre browser-Konsole
mein script src ist falsch?
Die browser-Konsole wird Ihnen sagen, werden; der code, den Sie geschrieben ist in Ordnung, so überprüfen Sie die Konsole für Fehler.
es gibt keine Fehler in der Konsole angezeigt. Die CSS und JS laden in Ordnung.

InformationsquelleAutor Adarsh Madrecha | 2018-01-13

  1. 10

    Diese Funktion ist veraltet seit v3.3.5 und wurde entfernt, in v4. Quelle

    Dies ist auch erwähnt in der "Migration für v4" - Artikel. getbootstrap.com/docs/4.1/migration/#buttons

    InformationsquelleAutor user3456070

  2. 3

    Lief in das gleiche Problem vor ein paar Tagen und niemand scheint eine Lösung haben. Also hier mein jQuery-plugin, das scheint das gleiche Verhalten in der Boostrap 4.

    (function($) {
    $.fn.button = function(action) {
        if (action === 'loading' && this.data('loading-text')) {
            this.data('original-text', this.html()).html(this.data('loading-text')).prop('disabled', true);
        }
        if (action === 'reset' && this.data('original-text')) {
            this.html(this.data('original-text')).prop('disabled', false);
        }
    };
}(jQuery));

    Mehr details: Wie geht es Weiter Mit Schaltflächen, die mit "data-loading-text" in der Bootstrap-4 mit jQuery (mein blog)

    Dies scheint kaputt zu sein in Safari + Chorme. Funktioniert im IE11 und Firefox - aber auf Chrome, die es nicht abschicken.
    Schwer zu diagnostizieren Ihr Problem ohne ein code-Beispiel. Dieser wurde entwickelt mit Chrome so...
    Dies wird brechen die eingebauten Funktionen $().button('toggle') und $().button('dispose'). Es ist besser, verwenden Sie ein anderes plugin name wie $.fn.buttonState.
    Ich glaube nicht, verwenden Sie diese Methoden, so dass Sie nicht getestet (würde nicht stellen Sie sich einen "laden" - button braucht). Guter Punkt wenn das der Fall ist ?
    Dies könnte eine gute Lösung sein und es war etwas, dass ich versucht war, es zu versuchen. Allerdings Stimme ich mit Bassem, bedeutet dies nicht, überschreiben Sie die andere Taste, die Methoden, die hier dokumentiert: getbootstrap.com/docs/4.2/components/buttons/#methods. Es ist nicht im Zusammenhang mit "laden" - buttons aber wenn jemand verwendet Ihren code, es würde brechen die toggle Methoden, wenn Sie verwendet werden, dass die Methode woanders. Ich denke deine Antwort wäre viel besser, wenn Sie überprüfen könnten, die action argument und rufen Sie die integrierte button funktionieren, wenn es nicht loading oder reset.

    InformationsquelleAutor Mavelo

Schreibe einen Kommentar