jQuery .on监听器无法为动态创建元素绑定点击事件的问题

嘿，我明白你遇到的问题了——用.on()做事件委托，结果只有页面加载时的第一个按钮能触发点击，后续动态生成的按钮完全没反应对吧？这大概率是你对事件委托的选择器写法理解有点偏差，咱们一步步捋清楚。

问题出在哪？ #

你提到“指定在body内查找ID为变量count值的元素”，我猜你的代码大概是这样的：

let count = 1;
// 绑定事件时用了当时的count值，选择器变成了#1（假设count初始是1）
$('body').on('click', '#' + count, function() {
  count++;
  $('body').append('<button id="' + count + '">新按钮' + count + '</button>');
});

这里的问题在于：你绑定事件时，'#' + count会被解析成当时的具体ID（比如#1），后续生成的按钮ID是#2、#3，完全不匹配这个选择器。事件委托的第二个参数需要的是一个能匹配所有目标动态元素的通用规则，而不是绑定时刻的某个特定值。

正确的解决方法 #

有两种常用的方案，选哪种看你的需求：

方案1：给动态按钮统一加类名（推荐）

给所有按钮（包括初始的和后续生成的）添加一个固定的类名，比如dynamic-btn，然后用这个类作为委托选择器：

<!-- 初始按钮 -->
<button id="1" class="dynamic-btn">按钮1</button>

let count = 1;
// 监听body内所有.dynamic-btn的点击事件
$('body').on('click', '.dynamic-btn', function() {
  count++;
  // 生成新按钮时别忘了加上同一个类
  $('body').append(`<button id="${count}" class="dynamic-btn">按钮${count}</button>`);
});

这样不管后续生成多少按钮，只要带有dynamic-btn类，点击事件都会被body捕获并触发回调。

方案2：用属性通配符匹配ID

如果你不想加类名，也可以用属性选择器匹配所有ID符合特定模式的按钮（比如ID都以某个前缀开头）：

let count = 1;
// 匹配所有ID以"btn-"开头的按钮
$('body').on('click', '[id^="btn-"]', function() {
  count++;
  $('body').append(`<button id="btn-${count}">按钮${count}</button>`);
});

这里的[id^="btn-"]表示“ID属性值以btn-开头的元素”，能覆盖所有后续生成的按钮。

核心原理回顾 #

事件委托的本质是利用事件冒泡：父元素（这里是body）监听事件，当子元素的事件冒泡上来时，会检查子元素是否匹配第二个参数的选择器。所以这个选择器必须是一个能匹配所有目标元素的规则，而不是绑定时刻的某个特定元素的选择器。

下次再遇到动态元素绑定事件的问题，记住：别用变化的变量直接拼选择器，用固定的类或者通用属性规则就对啦！

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