jquery - 将按钮的值设置为 HTML 内容

Question

如何更改按钮的值以便将其解释为 HTML 代码？我有这个:

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

当按下它时，我会这样做:

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

但是内容不会是旋转的旋转器。我该如何解决这个问题？

Answer 1

您不能将任何 HTML 放入 <input type="button"> 中元素。您需要使用<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类使图标旋转。