如何为动态生成的按钮添加/移除active类事件监听？

嘿，这需求不难搞定，咱们一步步来实现你要的效果：

1. 先修正选择器的小问题 #

你当前的点击事件绑定里，选择器.btn btn-default是后代选择器，会去找.btn元素下的btn-default标签，这显然不是你要的。正确写法是.btn.btn-default，用来匹配同时拥有btn和btn-default两个类的按钮：

$(document).on('click', '.btn.btn-default', function() {
  // 后续逻辑写在这里
});

2. 用CSS搞定悬停和激活样式 #

悬停变色用CSS处理最简洁，不用折腾JS：

/* 默认按钮样式（可以根据你的需求调整） */
.btn.btn-default {
  margin: 5px;
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
}

/* 鼠标悬停时的样式 */
.btn.btn-default:hover {
  background-color: #e6e6e6;
  color: #333;
}

/* 激活状态的样式 */
.btn.btn-default.active {
  background-color: #337ab7;
  color: #fff;
  border-color: #2e6da4;
}

3. 实现点击保持激活状态（支持多选） #

根据你的需求，点击按钮后保持激活色，切换其他按钮时当前激活状态仍保留（也就是允许多个按钮同时激活），咱们在点击事件里给当前按钮切换active类（点击添加，再次点击移除）：

$(document).on('click', '.btn.btn-default', function() {
  $(this).toggleClass('active');
  alert(this.innerHTML);
});

如果你想要单选模式（点击新按钮时自动取消之前的激活状态），可以改成下面的代码：

$(document).on('click', '.btn.btn-default', function() {
  // 先移除所有按钮的active类，再给当前按钮添加
  $('.btn.btn-default').removeClass('active');
  $(this).addClass('active');
  alert(this.innerHTML);
});

4. 写一个清除所有激活状态的方法 #

专门写个函数，方便你在需要的时候一键清除所有按钮的激活状态：

function clearActiveButtons() {
  $('.btn.btn-default').removeClass('active');
}

// 调用示例：比如绑定到一个重置按钮上
$('#resetBtn').on('click', function() {
  clearActiveButtons();
});

完整整合代码 #

把这些和你动态生成按钮的代码整合起来，完整示例如下：

<div id="buttonContainer"></div>
<button id="resetBtn">清除所有激活状态</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var numOfSets = 1;
var numOfButtons = 10;

// 动态生成按钮
for (var j = 0; j < numOfSets; j++) {
  for (var i = 1; i <= numOfButtons; i++) {
    const btn = $(`<button class="btn btn-default">按钮${i}</button>`);
    $('#buttonContainer').append(btn);
  }
}

// 按钮点击事件
$(document).on('click', '.btn.btn-default', function() {
  $(this).toggleClass('active');
  alert(this.innerHTML);
});

// 清除激活状态的方法
function clearActiveButtons() {
  $('.btn.btn-default').removeClass('active');
}

// 绑定重置按钮
$('#resetBtn').on('click', clearActiveButtons);
</script>

<style>
.btn.btn-default {
  margin: 5px;
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
}

.btn.btn-default:hover {
  background-color: #e6e6e6;
  color: #333;
}

.btn.btn-default.active {
  background-color: #337ab7;
  color: #fff;
  border-color: #2e6da4;
}
</style>

这样就完全满足你的需求了：悬停自动变色、点击保持激活（多选/单选可选）、随时可以一键清除所有激活状态。

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