geklonten Knopf funktioniert nicht

Question

Ich habe einige Javascript/Jquery, um eine Tabelle mit einigen Eingabedateien und eine Schaltfläche zu klonen. Nach dem Klonen scheint der Button nicht mehr zu funktionieren, wenn er dieselbe Klasse hat. Die Situation: Wenn Sie auf das Produkt hinzufügen klicken, wird eine Zeile unter der letzten Zeile kopiert, so dass ein Benutzer ein anderes Produkt zu der Option hinzufügen kann. Hier ein Beispiel:

Es gibt eine andere Taste unter diesen Produkten: Option erstellen. Diese Schaltfläche klont die erste Tabelle (Option) und hinter ihr unter der Schaltfläche. Aber nachdem es kopiert wurde, scheint die Schaltfläche "Add Product" nicht mehr zu funktionieren.

Ich habe keine Fehler, also weiß ich nicht, was ich falsch mache.

Dies ist der Code, den ich verwende, die Tabellen zu klonen:

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

Könnte some1 mir erklären, was ich tue und was könnte eine Lösung sein? Mein Code ist nicht perfekt atm ich denke und ich bin offen für das Lernen!

Happy Coding!

Answer 1

Verwendung document.on, wenn Sie Elemente dynamisch 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'); 
    });