克隆按钮不起作用

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

使用document.on当你添加动态元素到DOM

$(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'); 
    });