当使用 jQuery 在按钮中附加一个很棒的字体图标时，当我单击另一个按钮时，该图标会消失答案

【问题标题】：When appending a font awesome icon in a button using jQuery the icon disappears when I click another button当使用 jQuery 在按钮中附加一个很棒的字体图标时，当我单击另一个按钮时，该图标会消失
【发布时间】：2015-11-20 13:35:53
【问题描述】：

我正在使用 jQuery 制作待办事项列表 Web 应用程序。我有一个灰色的引导按钮，带有一个空框图标（来自 font awesome），以显示项目不完整。当用户完成任务时，我希望按钮变为绿色，图标变为复选框图标（也来自 font awesome）。我可以通过更改类和更改一个项目的图标来使按钮变为绿色，但是当我单击另一个项目以标记为完成时，上一个按钮保持绿色，但复选框图标消失。

基本上， 图标的代码会从单击第二个按钮后单击的第一个按钮的代码中删除，但前一个按钮仍保持绿色。当我单击第三个按钮时，第二个按钮也会发生同样的事情。我怎样才能让 留下来？提前感谢您的帮助。

var checked = $("<i>").addClass("fa fa-check-square-o");

  $("table").on("click", ".btn-default", function(){
    $(this).replaceWith($("<button>").attr("type", "button").addClass("btn btn-success").append(checked));
  });

【问题讨论】：

标签： jquery twitter-bootstrap font-awesome

【解决方案1】：

只需将选中的元素放入点击范围

  $(document).on("click", ".btn-default", function(){
      checked = $("<i>").addClass("fa fa-check-square-o");
      $(this).replaceWith($("<button>").attr("type", "button").addClass("btn btn-success").append(checked));
  });

否则它将始终引用相同的 元素并将其附加到下一个单击的按钮

【讨论】：

谢谢！不敢相信我忽略了这一点！

【解决方案2】：

尝试简化这一行

$(this).replaceWith("<button type='button' class='btn btn-success'><li class='fa fa-check-square-o'></li></button");

【讨论】：

【解决方案3】：

将 var 的声明移入点击处理程序。原因是您每次调用 .append 时都会创建一个元素并移动它。

来自 .append 文档

http://api.jquery.com/append/

"如果以这种方式选择的元素被插入到 DOM 中其他位置的单个位置，它将被移动到目标中（未克隆）"

【讨论】：