Wert der Schaltfläche als HTML-Inhalt festlegen

Question

Wie ändert man den Wert einer Schaltfläche, so dass sie als HTML-Code interpretiert wird? Ich habe dies:

<input type="button" value="Click"> 

Wenn es Drücken ich dies tun:

$(this).prop('disabled', true); 
$(this).prop('value', '<i class="fa fa-spinner"></i>'); 

aber der Inhalt wird nicht eine rotierende Spinner sein. Wie kann ich das beheben?

Answer 1

Sie können kein HTML in ein <input type="button"> Element einfügen. Sie müssen <button> verwenden, um dies zu erreichen, zusammen mit html() statt prop():

$('button').click(function() { 
 
    $(this).prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i>'); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button">Click</button>

Hinweis die Zugabe der fa-spin Klasse, um das Symbol drehen zu lassen.

Answer 2

Sie können HTML nicht als Eingabefeld festlegen. Sie wird die Situation wie der Eingang schauen zu fälschen haben rendert den Spinner:

$("input").click(function(e){ 
    $(this).prop('disabled', true).css("display", "none"); 
    $wrapper = $("<div >"); 
    $(this).wrap($wrapper); 
    $(this).after('<i class="fa fa-spinner"></i>'); 
}) 

JSFiddle: https://jsfiddle.net/uswcfjef/