Input mask does not work in dynamic fields

Asked

Viewed 58 times

0

I’m using the library mask to format values, percentages, etc. I have a field carga_imposto (type %), and other carga_valor (type 0.00), which can be added dynamically via jquery. To add, it works perfectly, however, the mask only works with the previously loaded items.

When creating a new item, the input is not formatted.

HTML of the fields:

<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 to be cloned:

<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

When creating the field dynamically, I tried to add $('.carga_imposto').mask('##0,00%', {reverse: true});, but without success:

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

Currently the result I have is:

The first was loaded on screen, the second was added dynamically.

inserir a descrição da imagem aqui

jquery

  • Hi. So I tried to make the switch. But it didn’t work.

  • Try switching $('.carga_imposto').mask('##0,00%', {reverse: true}); for $clone.find('.carga_imposto').mask('##0,00%', {reverse: true});. In its cloned elements, you have to change the id by class.

  • carga_tax is as id in the elements, should be a class.

  • I agree, but it includes the class, but it doesn’t work... technically, it should work.

  • No, the system applies anything in the first id not applicable to all who have the same id.

  • Yes, if it is by class, I should apply in a next class, independent, but, if it is on screen... however, if I add a new element on screen, I need to tell him that he needs to include also in this element, and here’s the problem.

Show 1 more comment

1 answer

0

This is Mr. André, blz? Let’s go in pieces...your code has some points that we can improve:

  1. You are using repeated Ids in the same document, so you really will have problems handling these. See id="carga_valor" and id="carga_imposto";

  2. As you are creating more elements dynamically, it is healthier to replace them with classes (for this case);

  3. Although the elements are dynamic, you are cloning another set of elements. Leave the inputs that need mask already initialized at the beginning of your code, because they already exist and will be cloned with the proper formatting;

  4. You included an element <button> within a tag <a>. Is there a specific reason? This is not quite right ;) .

See the functional example: https://codepen.io/tiagosabadini/pen/RwaRjJB?editors=1010

Browser other questions tagged jquery

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