jQuerys .html() manchmal wirkt seltsam in Chrome

Question

Ich habe eine Schaltfläche:

Jetzt habe ich eine Methode auf diese Schaltfläche:

function showPreview(event) { 
    var button = event.target; 

    $(button).empty().html('<i class="fa fa-spinner fa-pulse"></i>'); 

    $.post(
     ..., 
     function (data) { 
      ... 

      $(button).empty().html('<i class="fa fa-fw fa-file-pdf-o"></i> Preview'); 
     } 
    ); 
} 

Manchmal (selten), wenn ich auf die Taste in Chrome, endet es so aufzublicken:

Beim Einchecken des Seiteninspektors in Chrome wird jedoch angezeigt, dass nur 1 Symbol und 1 "Vorschau" -Zeichenfolge in der Schaltfläche vorhanden ist.

Ich habe dies mit anderen Browsern getestet, und keine teilen einen ähnlichen Fehler.

Browser Ich habe getestet dies mit:

• Internet Explorer 11
• Firefox
• Opera
• Safari

Ich habe gefolgert ein Chrome-Bug zu sein, und Das ist inakzeptables Verhalten. Wie Sie sehen können, versuche ich bereits, die Schaltfläche zu leeren, bevor ich neuen Inhalt ohne Erfolg hinzufüge. Gibt es eine andere Problemumgehung für dieses bestimmte Problem?

Hier ist meine JSFiddle: https://jsfiddle.net/spe0asbo/2/

Bitte zur Kenntnis nehmen, dass dies nur selten geschieht. Es könnte dir überhaupt nicht passieren.

Answer 1

Geben Sie die Taste eine ID und ersetzen event.target mit dem Knopfelement selbst.

HTML:

<button id='btn01' type="button" onclick="javascript:showPreview(event);"> 
    <i class="fa fa-fw fa-file-o"></i> Preview 
</button> 

JS:

function showPreview(event) { 
    var button = $('#btn01'); 
    $(button).attr("disabled", "disabled"); 
    $(button).html('<i class="fa fa-fw fa-spin fa-spinner"><i>'); 
    setTimeout(function() { 
     $(button).html('<i class="fa fa-fw fa-file-o"></i> Preview'); 
     $(button).removeAttr("disabled"); 
    }, 2000); 
} 

Siehe JSFiddle Link hier: https://jsfiddle.net/4h5pehr9/

Answer 2

Es passierte nur, wenn ich auf die Schaltfläche doppelklickte.

meine Änderungen prüfen: https://jsfiddle.net/ag0ztLna/3/

function showPreview(event) { 
    var button = event.target; 
    $(button).attr("disabled", "disabled"); 
    $(button).html('<i class="fa fa-fw fa-spin fa-spinner"><i>'); 

    setTimeout(function() { 
    $(button).html('<i class="fa fa-fw fa-file-o"></i> Preview'); 
    $(button).removeAttr("disabled"); 
    }, 2000); 
}