克隆按钮不起作用

Question

我有一些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');
    });
});

some1可以向我解释我在做什么以及可能是什么解决方案？我认为我的代码并不完美，而且我愿意学习！

快乐的编码！

Answer 1

在向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');
    });