Ajax替换内容：点击Save后切换显示Unsave按钮的实现问题

你尝试用$('#bar_save').text('<a href="#" id="bar_unsave" class="bar_unsave"> Unsave</a>')没生效，是因为text()方法是用来设置纯文本内容的——它会把你写的<a>标签当成普通字符串直接显示，不会解析成HTML元素。要实现替换按钮的需求，有两种更靠谱的方式：

方法1：用html()替换内容（快速解决） #

把text()换成html()方法，它会解析并插入HTML代码：

$('#bar_save').html('<a href="#" id="bar_unsave" class="bar_unsave"> Unsave</a>');

不过要注意：动态生成的Unsave按钮需要重新绑定点击事件，最好用事件委托避免重复绑定问题，比如给父容器绑定事件：

// 假设按钮放在id为"button-group"的容器里
$('#button-group').on('click', '#bar_unsave', function(e) {
  e.preventDefault();
  // 这里写你的删除数据Ajax逻辑
  $.ajax({
    url: '你的删除接口',
    method: 'POST',
    data: { /* 你的数据参数 */ },
    success: function() {
      // 删除成功后再替换回Save按钮
      $('#bar_unsave').html('<a href="#" id="bar_save" class="bar_save"> Save</a>');
    }
  });
});

方法2：切换按钮显示/隐藏（更优雅推荐） #

这种方法不需要动态修改HTML结构，一开始就把两个按钮都写在页面上，默认隐藏Unsave按钮，点击后切换显示状态：

HTML部分： #

<a href="#" id="bar_save" class="bar_save"> Save</a> 
<a href="#" id="bar_unsave" class="bar_unsave" style="display: none;"> Unsave</a>

JS部分： #

// 点击Save按钮保存数据
$('#bar_save').on('click', function(e) {
  e.preventDefault();
  $.ajax({
    url: '你的保存接口',
    method: 'POST',
    data: { /* 你的数据参数 */ },
    success: function() {
      // 保存成功后切换按钮显示
      $('#bar_save').hide();
      $('#bar_unsave').show();
    }
  });
});

// 点击Unsave按钮删除数据
$('#bar_unsave').on('click', function(e) {
  e.preventDefault();
  $.ajax({
    url: '你的删除接口',
    method: 'POST',
    data: { /* 你的数据参数 */ },
    success: function() {
      // 删除成功后切换回Save按钮
      $('#bar_unsave').hide();
      $('#bar_save').show();
    }
  });
});

这种方式的优势是代码更清晰，没有动态DOM操作的开销，用户体验也更流畅（不会有元素重新创建的闪烁感）。

内容的提问来源于stack exchange，提问作者drubecepha