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/

将按钮的值设置为HTML内容

2 个答案: