Help with duplicating content

Asked

Viewed 43 times

1

I’m duplicating a div with content that is filled via a form on the same page, but when it duplicates the functions in jQuery do not work in this new div that was duplicated, the functions continue working on the other Ivs that were already on the screen.

I’ll post my code and my screen:

jQuery:

$('.btn-novo-endereco').on('click', function(event){
        var tipoEndereco = $('.tipoEndereco').val();
        var destinatario = $('.destinatario').val();
        var endereco = $('#enderecoEmpresa').val();
        var numero = $('#numeroEmpresa').val();
        var complemento = $('#complementoEmpresa').val();
        var referencia = $('#referenciaEmpresa').val();
        var cep = $('#cepEmpresa').val();
        var bairro = $('#bairroEmpresa').val();
        var cidade = $('#cidadeEmpresa').val();
        var estado = $('#estadoEmpresa').val();

        //gera um novo id para os novos endereços
        var novoId = "endereco" + idAutomatico;
        idAutomatico++;

        var htmlNovoEndereco = 
                '<div class="col-md-6">' +
                '<div class="row">' +
                '<div class="col-md-12">' +
                '<div class="container endereco-cadastrado">' +
                '<div class="row">' +
                '<div class="col-md-12">' + tipoEndereco + '<span class="icon-edit"><a href="#" alt="Editar" title="Editar" class="editar-endereco" data-toggle="collapse" data-target="#colapseEditarEndereco" aria-expanded="false" aria-controls="colapseEditarEndereco"><i class="fas fa-pencil-alt"></i></a></span>' +
                '<span class="icon-delete"><a href="#" alt="Deletar" class="deletar-endereco" title="Deletar"><i class="fas fa-trash-alt"></i></a></span>' +
                '</div>' +
                '</div>' +
                '<div class="row">' +
                '<div class="col-md-12">' + destinatario +'</div>'+
                '</div>' +
                '<div class="row">' +
                '<div class="col-md-12">' +
                 endereco + ',' + numero + ' - ' + complemento + 
                '</div>' +
                '</div>' +
                '<div class="row">' +
                '<div class="col-md-12">' +
                cep + ' - ' + bairro + 
                '</div>' +
                '</div>' +
                '<div class="row">' +
                '<div class="col-md-12">' +
                cidade + '/' + estado + 
                '</div>' + 
                '</div>' +
                '<div class="row">' +
                '<div class="col-md-12 font-size-14px checka bg-light endereco-nao-padrao ">' +
                '<div class="form-check form-check-inline">' +
                '<input class="form-check-input check-padrao" type="radio" name="definirPadrao" id="'+ novoId +'" value="padrao'+idAutomatico+'">' +
                '<label class="form-check-label" for="'+novoId+'">Definir como endereço padrão</label>' +
                '</div>'+
                '</div>'+
                '</div>'+
                '</div>'+
                '</div>'+
                '</div>'+
                '</div>';


        $(htmlNovoEndereco).clone().prependTo('.novos-enderecos');

        $('.camposNovoEndereco').fadeOut('fast');

        limpa_formulario_cep();
        $('.tipoEndereco').val("");
        $('.destinatario').val("");
        $('#cepEmpresa').val("");
    })

My Canvas

inserir a descrição da imagem aqui

Thanks for the help

jquery css html5

  • What are the events that do not work (the code)? For example, the "recycle bin"?

  • Good afternoon @Sam yes Trash and radio input, which should work and do not work! $('. delete-address'). on('click', Function(Event){ // question before deleting var delete = confirm('Do you really want to delete the address? '); // checks that the delete has been clicked on ok, returns ( true or false ), if yes executes the first condition if(delete){ $(this). Parent(). Parent(). Parent(). Parent(). Parent(). Parent(). Parent(). remove(); } Else { Event.preventDefault(); } })

  • 1

    Switch to $(document).on('click', '.deletar-endereco', function(event){

  • Always use this syntax when playing with dynamic elements.

  • Thank you, I will test and return with the solution! =)

  • Show @Sam was that, thank you very much!

  • 1

    Thank you! @Sam =)

Show 2 more comments
No answers

Browser other questions tagged jquery css html5

You are not signed in. Login or sign up in order to post.