克隆元素绑定的on click点击事件无法正常触发问题

核心问题 #

你的代码里点击事件不生效，主要有两个原因：

1. 使用clone()方法时，默认不会复制元素上绑定的事件（jQuery的clone()默认参数为false，仅复制结构，不复制事件和数据）。
2. 克隆.form-group容器时，新生成的容器里的按钮是全新元素，没有继承原按钮的事件绑定。

具体修复步骤 #

1. 修复初始按钮克隆的事件丢失

把代码里的：

$add_btn.clone().appendTo($btn_holder);

改成：

$add_btn.clone(true).appendTo($btn_holder);

clone(true)会同时复制元素的事件处理函数和相关数据，这样第一次生成的按钮就能正常触发点击事件。

2. 用事件委托解决动态克隆元素的事件失效问题

更稳妥的方式是采用事件委托，把点击事件绑定到一个始终存在的父元素（比如document或者固定的容器）上，而非直接绑定到按钮本身。这样不管是初始按钮还是后来克隆出来的按钮，都能触发事件。

修改代码如下：

• 移除$add_btn创建时的on('click')绑定：

let $add_btn= $('<a></a>').addClass('btn-success btn add_btn').attr('href','#');

• 在函数外部（比如初始化代码里）添加事件委托：

$(document).on('click', '.add_btn', function(e) {
    e.preventDefault();
    alert(':)');
    dyn_form.add_btn($(this));
});

这样处理后，所有带有.add_btn类的按钮，不管是一开始生成的还是后来克隆出来的，点击事件都能正常生效。

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