Javascript 克隆的按钮不起作用

我有一些javascript/jquery来克隆带有一些输入文件和按钮的表。克隆后，当按钮具有相同的类时，它似乎不再工作

情况： 单击“添加产品”时，将在最后一行下复制一行，以便用户可以向该选项添加其他产品。下面是一个例子：

这些产品下面还有一个按钮：创建选项。此按钮克隆第一个表（选项）并在按钮下经过它。但是在它被复制之后，“添加产品”按钮似乎不再起作用了

我没有任何错误，所以我不知道我做错了什么

这是我用来克隆表的代码：

<script type="text/javascript">
$(document).ready(function () {
    $('.addproduct').click(function (e) {
        // Clone a product and add it to the option.
        e.preventDefault();
        var item = document.getElementById('hiddenTemplate').cloneNode(true);
        $('#hiddenTemplate').before(item);
        $(item).removeAttr('id');

    });
    $('.addOption').click(function (e){
        // Create a new option
        e.preventDefault();
        var item = document.getElementById('hiddenOption').cloneNode(true);
        $('.newOption').append(item);
        $(item).removeAttr('id');
        $(item).addClass('tableOptions');
    });
});

$（文档）.ready（函数（）{
$（'.addproduct'）。单击（函数（e）{
//克隆产品并将其添加到选项中。
e、 预防默认值（）；
var item=document.getElementById（'HiddentTemplate'）.cloneNode（true）；
$（'hiddenTemplate'）。在（项目）之前；
$（项目）.removeAttr（'id'）；
});
$（'.addOption'）。单击（函数（e）{
//创建一个新选项
e、 预防默认值（）；
var item=document.getElementById（'hiddenOption'）.cloneNode（true）；
$（'.newOption'）。追加（项目）；
$（项目）.removeAttr（'id'）；
$（item）.addClass（'tableOptions'）；
});
});

有人能给我解释一下我在做什么，什么可能是解决办法吗？我认为我的代码不完美，我愿意学习

---

快乐编码

将元素动态添加到DOM时，请使用

document.on

 $(document).on('.addproduct','click', function (e) {
        // Clone a product and add it to the option.
        e.preventDefault();
        var item = document.getElementById('hiddenTemplate').cloneNode(true);
        $('#hiddenTemplate').before(item);
        $(item).removeAttr('id');

    });

    $(document).on('.addOption','click',function (e){
        // Create a new option
        e.preventDefault();
        var item = document.getElementById('hiddenOption').cloneNode(true);
        $('.newOption').append(item);
        $(item).removeAttr('id');
        $(item).addClass('tableOptions');
    });

---

cloneNode（）

不复制事件处理程序。我建议使用jQuery的

clone（true）

，或者使用委托事件处理程序。后者是最简单的。无论何时生成动态html，事件都不会绑定到它们，因为所有事件都是在生成网页之前绑定的。因此，需要委派事件，即向父元素添加事件。选中@Ameya Deshpande answer。“创建选项”按钮是否重复使用

。添加产品
单击代码？如果没有，如果你发布了它以及相关的HTMLWhen我使用你的代码，“hiddenOption”不再被克隆。你调试了吗？杰普，没有错误+如果我查看代码中没有新的tr.clone（true）似乎可以工作，但是idk为什么你的解决方案不能工作。它进入点击事件了吗？