0

estou enfrentando problemas para clonar elementos com javascript.

O problema:

Conforme imagem abaixo, o formulário contém um checkbox que ao clicar executa um função que muda o valor do input qtd Min.

Ao clicar no texto Adicionar Categoria, cria um clone do formulário completo;

Ao clicar no texto Adicionar subcategoria, cria um clone dos inputs nome, descrição e preço. Ou seja, é um clone dentro de outro clone. Porém ao clonar esse formulário a função do checkbox e subclone dos inputs não funcionam;

inserir a descrição da imagem aqui

Existe alguma forma prática de fazer isso? Preciso criar várias categorias e dentro de cada categoria criar várias subcategorias.

Abaixo o código javascript que estou usando no momento:

//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");
	 });
});

Fico muito grato se os amigos puderem me ajudar.

1

3 Respostas 3

0

Quando se trabalhe com criação de objetos dinâmicos, costumamos colocar o evento no formulário e posteriormente localizar os objetos descendentes dentro desse formulário.

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

Eu não consegui reproduzir o problema, realmente está faltando o seu HTML aqui para facilitar as respostas, mas tente assim pra ver se resolve:

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

Talvez reiniciar o listenner dos elementos clonados toda vez que eles forem clonados resolva o problema.

0

Galera, muito obrigado pelas respostas, foram muito úteis. O seguinte código resolveu o problema...

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .