Cloning elements with Javascript

Question

I am facing problems to clone elements with javascript.

The problem:

As shown below, the form contains a checkbox that when clicking executes a function that changes the input value Qtd Min.

By clicking on the text Add Category, creates a clone of the full form;

By clicking on the text Add subcategory, creates a clone of inputs name, description and price. That is, it is a clone within another clone. But when you clone that form the function of checkbox and subclone inputs do not work;

Is there any practical way to do this? I need to create several categories and within each category create several subcategories.

Below the javascript code I’m currently using:

//clone categoria /////////////////////////////////
$(document).ready(function(){
	$('#but_addcategoria').click(function(){
	  var newel = $('.categoria:last')
	  .clone(true)
	  .find("input").val("").end()
	  $(newel).insertAfter(".categoria:last");
	 });
});

//clone subcategoria
$(document).ready(function(){
	$('#but_addsubcategoria').click(function(){
	  var newel = $('.tb-complementos:last')
	  .clone(true)
	  .find("input").val("").end();
	  $(newel).insertAfter(".tb-complementos:last");
	 });
});

I am very grateful if friends can help me.

Answer 1

When working with dynamic object creation, we usually place the event in the form and then locate the descending objects within that form.

$(document).ready(function(){
    $('#id_do_formulário').on('click', '#but_addcategoria', function(){ //clone categoria
        var newel = $('.categoria:last')
        .clone(true)
        .find("input").val("").end()
        $(newel).insertAfter(".categoria:last");
    }).on('click', '#but_addsubcategoria', function(){ //clone subcategoria
        var newel = $('.tb-complementos:last')
        .clone(true)
        .find("input").val("").end();
        $(newel).insertAfter(".tb-complementos:last");
     });
});

Answer 2

I could not reproduce the problem, it is really lacking your HTML here to facilitate the answers, but try so to see if it solves:

const otherClickListeners = () => {
    $('#but_addsubcategoria').click(function(){
      var newel = $('.tb-complementos:last')
        .clone(true)
        .find("input").val("").end();
      $(newel).insertAfter(".tb-complementos:last");
     });
    // Aqui o código para iniciar o click listenner do checkbox, que não estava no seu código
}

//clone categoria /////////////////////////////////
$(document).ready(function(){
    $('#but_addcategoria').click(function(){
      var newel = $('.categoria:last')
        .clone(true)
        .find("input").val("").end()
      $(newel).insertAfter(".categoria:last");
      otherClickListeners();
    });
    otherClickListeners();
});

Perhaps restarting the cloned elements listener every time they are cloned will solve the problem.

Answer 3

Guys, thank you so much for your answers, you’ve been very helpful. The following code solved the problem...

$(document).ready(function(){
	$('#but_add').click(function(){ 
	  var newel = $('.categoria:last')
	  .clone(true)
	  .find("input").val("").end()	  
	  $(newel).insertAfter(".categoria:last");
	 });
});
//add subcategoria
$(document).ready(function(){
	$('#but_add_c').click(function(){
	  var newel = $('.tb-complementos:last')
	  .clone(true)
	  .find("input").val("").end();
	  $(newel).insertBefore(this);
	 });
});