將按鈕的值設置爲HTML內容

Question

如何更改按鈕的值以便將其解釋爲HTML代碼？我有這樣的：

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

當按下它，我這樣做：

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

但內容將不會是一個旋轉的紡絲。我怎樣才能解決這個問題？

Answer 1

您不能在<input type="button">元素中放置任何HTML。你需要使用<button>實現這一目標，與html()代替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>

注意添加fa-spin類以使該圖標旋轉。

Answer 2

您不能將HTML設置爲輸入字段。您將有假的情況看起來像輸入渲染微調：

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