0

Estou usando a biblioteca mask para formatar valores, porcentagens e etc. Tenho um campo carga_imposto (tipo %), e outro carga_valor (tipo 0.00), os quais podem ser adicionados dinamicamente através do jquery. Para adicionar, funciona perfeitamente, porém, a máscara só funciona com os itens previamente carregados.

Ao criar um novo item, o input não é formatado.

HTML dos campos:

<div id="box_carga"  class="box_carga">
    <div class="row form-group">

        <div class="col-12 col-md-2">
            <input type="text" id="carga_valor" name="carga_valor[]" placeholder="Valor" class="form-control valor" value="">
        </div> 

        <div class="col-12 col-md-1">
            <input type="text" id="carga_imposto" name="carga_imposto[]" placeholder="Imposto" class="form-control percentual" value="">
        </div>

        <div class="col-12 col-md-1">
            <a href="javascript:void(0);" class="adicionar_carga"><button type="button" class="btn btn-primary"><i class="fa fa-plus"></i></button></a>
        </div>
    </div>
</div>

HTML a ser clonado:

<div id="box_carga_clone" style="margin-top: 15px;" class="box_carga_clone hide">
    <div class="row form-group">

        <div class="col-12 col-md-2">
            <input type="text" id="carga_valor" name="carga_valor[]" placeholder="Valor" class="form-control valor" value="">
        </div> 

        <div class="col-12 col-md-1">
            <input type="text" id="carga_imposto" name="carga_imposto[]" placeholder="Imposto" class="form-control percentual" value="">
        </div>

        <div class="col-12 col-md-1">
            <a href="javascript:void(0);" class="remover_carga"><button type="button" class="btn btn-danger"><i class="fa fa-trash"></i></button></a>
        </div>
    </div>

jQuery

Ao criar o campo dinamicamente, tentei adicionar $('.carga_imposto').mask('##0,00%', {reverse: true});, mas sem sucesso:

$('.adicionar_carga').click(function(){
    $clone = $('.box_carga_clone.hide').clone(true);
    $clone.removeClass('hide');
    $('.box_carga').append($clone);
    $('.carga_imposto').mask('##0,00%', {reverse: true});
});

$('.remover_carga').click(function(){
    $(this).parent().parent().parent().remove();
});       

$('.remover_carga_ativo').click(function(){
    $(this).parent().parent().remove();
}); 

Atualmente o resultado que eu tenho é:

O primeiro foi carregado em tela, o segundo foi adicionado dinamicamente.

inserir a descrição da imagem aqui

6
  • Oi. Então, experimentei fazer a troca. Mas não deu certo. Commented 17/08/2020 às 13:51
  • Experimenta trocar $('.carga_imposto').mask('##0,00%', {reverse: true}); por $clone.find('.carga_imposto').mask('##0,00%', {reverse: true});. Nos seus elementos clonados, tem que trocar o id por classe.
    – Benilson
    Commented 17/08/2020 às 13:51
  • carga_imposto está como id nos elementos, deveria ser uma classe.
    – Benilson
    Commented 17/08/2020 às 13:52
  • concordo, mas inclui a class, mas não dá certo... tecnicamente, deveria sim funcionar. Commented 17/08/2020 às 13:55
  • Não, o sistema aplica qualquer coisa no primeiro id que achar, não aplica em todos que tenham o mesmo id.
    – Benilson
    Commented 17/08/2020 às 13:59

1 Resposta 1

0

Fala Sr. André, blz? Vamos por partes...seu código tem alguns pontos que podemos melhorar:

  1. Você está utilizando IDs repetidos no mesmo documento, então realmente você terá problemas na manipulação destes. Veja id="carga_valor" e id="carga_imposto";

  2. Como você está criando mais elementos dinamicamente, é mais saudável você substituir por classes (para este caso);

  3. Apesar dos elementos serem dinâmicos, você está clonando de um outro conjunto de elementos. Deixe os inputs que necessitam de máscara já inicializados no início do seu código, porque eles já existem e serão clonados com as devidas formatações;

  4. Você incluiu um elemento <button> dentro de uma tag <a>. Tem algum motivo específico? Isso não está muito correto ;) .

Veja o exemplo funcional: https://codepen.io/tiagosabadini/pen/RwaRjJB?editors=1010

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 .