本文详解 jquery 中动态生成按钮点击事件不触发的原因及正确绑定方法，重点介绍事件委托、类名设计规范与 data 属性的最佳实践。
本文详解 jquery 中动态生成按钮点击事件不触发的原因及正确绑定方法，重点介绍事件委托、类名设计规范与 data 属性的最佳实践。
在使用 jQuery 开发动态表单或可编辑组件时，一个常见误区是：直接对尚未存在于 DOM 中的元素使用 .click() 绑定事件（如 $('.rem_mer_sec-1').click(...)），这会导致事件完全无效——因为该选择器在执行时找不到匹配节点。你遇到的问题正是如此：$('[class^="rem_mer_sec-"]') 试图匹配 class 属性“以 rem_mer_sec- 开头”的元素，但实际生成的按钮完整 class 是 "btn btn--dark rem_mer_sec-1"，它以 "btn" 开头，因此选择器始终为空，事件自然无法触发。
✅ 正确做法是统一使用语义化静态类名 + 事件委托：
首先，在动态生成 HTML 时，为所有“移除按钮”添加一个固定且唯一用途的类名（如 rem_mer_sec），同时保留带序号的类（可选）仅用于样式隔离或调试，不用于事件绑定：
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
<button type="button"
class="btn btn--dark rem_mer_sec"
data-section-id="merge_sec-1"
style="display: inline-flex;">
<span style="font-weight:bolder; font-size:30px;">-</span>
<span style="font-weight: bold">Remove Merge Section</span>
</button>然后，使用 $(document).on('click', '.rem_mer_sec', ...) 进行事件委托：
// ✅ 推荐：基于静态类名的事件委托
$(document).on('click', '.rem_mer_sec', function() {
const $btn = $(this);
const sectionId = $btn.data('section-id'); // 获取自定义数据
console.log('Removing section:', sectionId);
$(`#${sectionId}`).remove(); // 安全移除对应区块
});? 关键说明：
-
$(document).on('event', 'selector', handler)是 jQuery 推荐的动态元素事件绑定方式，它监听 document 上冒泡的事件，并对符合 selector 的当前/未来元素触发 handler； - 避免使用
[class^="xxx"]等属性选择器定位动态类——它耦合紧密、易失效、难以维护； - 使用
data-*属性（如data-section-id）传递上下文信息，语义清晰、性能稳定，且完全兼容 HTML5 标准； - 所有内联样式（如
style="..."）应移至外部 CSS 文件，提升可维护性与复用性。
? 进阶建议：
若需更高性能，可将事件委托目标从 document 收窄至最近的静态父容器（如 .merge_sections），减少事件冒泡路径：
$('.merge_sections').on('click', '.rem_mer_sec', function() {
// 同上逻辑，但更高效
});总结：动态元素事件失效的本质是“绑定时机早于元素存在”，而破局关键在于——用静态标识符（类名）定义行为，用 data 属性承载状态，用事件委托实现解耦。遵循这一模式，你的交互逻辑将更健壮、可读、可扩展。
