Apply maskMoney to dynamically added fields

Question

I have a form where I add valor, data, detalhes_transacao, however, these fields are added dynamically through a javascript. The problem is that the value mask (maskMoney) works only in the first field, which is visible on the screen... when fields are added dynamically, it does not work.

HTML

<div class="form-group" id="debit-after">
    <div class="col-md-3">
        <div class="form-group">
            <label>Amount</label>
            <input type="text" class="form-control border-input money" id="debit[0][amount]" name="debit[0][amount]" placeholder="Amount" value="">
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <label for="exampleInputEmail1">Date</label>
            <input type="date" class="form-control border-input" id="debit[0][ddate]" name="debit[0][ddate]" placeholder="Date">
        </div>
    </div>
    <div class="col-md-5">
        <div class="form-group">
            <label for="exampleInputEmail1">Details</label>
            <input type="text" class="form-control border-input" id="debit[0][details]" name="debit[0][details]" placeholder="Details of Transaction">
        </div>
    </div>  
    <div class="col-md-1" id='debit-transaction-lasted'>
        <a href="javascript:;" class="debit-transaction"><i class="fa fa-plus icon-add"></i></a>
    </div>
</div>

Javascript

// Transactions Debit
$(document).ready(function() {
    var max_fields      = 100; //maximum input boxes allowed
    var wrapper         = $("#debit-after"); //Fields wrapper
    var add_button      = $(".debit-transaction-edit"); //Add button ID
    var total_debit    = $("#debit_total_rows").val();


    var x = total_debit; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();

        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div class="note"><div class="col-md-3"><div class="form-group"><input type="text" class="form-control border-input money" placeholder="Amount" value="" id="debit['+ x +'][amount]" name="debit['+ x +'][amount]"></div></div><div class="col-md-3"><div class="form-group"><input type="date" class="form-control border-input" placeholder="Date" id="debit['+ x +'][ddate]" name="debit['+ x +'][ddate]"></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control border-input" id="debit['+ x +'][details]" name="debit['+ x +'][details]" placeholder="Details of Transaction"></div></div><div class="col-md-1"><a href="#" class="remove_field_debit_edit"><i class="fa fa-trash icon-trash"></i></a></div></div></div><div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field_debit_edit", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent().parent().remove(); x--;
    })
});

Class I apply for values: money

$(document).ready(function(){
    $('.money').maskMoney();
}); 

Result in Canvas

Answer 1

The problem is, when you add only $('.money').maskMoney();, at the beginning, it only works for the elements that are loaded in the page update. So, to solve this problem, you must, at every time you add a new element that contains a mask, to function of the plugin, which is the $('.money').maskMoney();.

I made a few edits to your code to make it easier, however, it doesn’t take the essence of the problem you were facing.

The problem is solved.

// Transactions Debit
$(document).ready(function() {
$('.money').maskMoney();
    var max_fields      = 100; //maximum input boxes allowed
    var wrapper         = $("#debit-after"); //Fields wrapper
    var add_button      = $(".debit-transaction-edit"); //Add button ID
    var total_debit    = $("#debit_total_rows").val();


    var x = total_debit; //initlal text box count
    
    add_button.click(function(e){ //on add input button click
        
        e.preventDefault();
   ++x;
            $(wrapper).append('<hr/><div class="note"><div class="col-md-3"><div class="form-group"><input type="text" class="form-control border-input money" placeholder="Amount" value="" id="debit['+ x +'][amount]" name="debit['+ x +'][amount]"></div></div><div class="col-md-3"><div class="form-group"><input type="date" class="form-control border-input" placeholder="Date" id="debit['+ x +'][ddate]" name="debit['+ x +'][ddate]"></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control border-input" id="debit['+ x +'][details]" name="debit['+ x +'][details]" placeholder="Details of Transaction"></div></div><div class="col-md-1"><a href="#" class="remove_field_debit_edit"><i class="fa fa-trash icon-trash"></i></a></div></div></div><div><hr/>'); //add input box
            
            document.getElementById("debit["+ x +"][amount]").focus();
            
            $('.money').maskMoney();

    });

    $(wrapper).on("click",".remove_field_debit_edit", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent().parent().remove(); x--;
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>
<div class="row">
<div class="col-md-12">
<div class="form-group" id="debit-after">
    <div class="col-md-3">
        <div class="form-group">
            <label>Amount</label>
            <input type="text" class="form-control border-input money" id="debit[0][amount]" name="debit[0][amount]" placeholder="Amount" value="">
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <label for="exampleInputEmail1">Date</label>
            <input type="date" class="form-control border-input" id="debit[0][ddate]" name="debit[0][ddate]" placeholder="Date">
        </div>
    </div>
    <div class="col-md-5">
        <div class="form-group">
            <label for="exampleInputEmail1">Details</label>
            <input type="text" class="form-control border-input" id="debit[0][details]" name="debit[0][details]" placeholder="Details of Transaction">
        </div>
    </div>  
    <div class="col-md-1" id='debit-transaction-lasted'>
        <a href="javascript:;" class="debit-transaction"><i class="fa fa-plus icon-add"></i></a>
    </div>
</div>
</div>
</div>
<button class="debit-transaction-edit">Add</button>

Add the code: $('.money').maskMoney(); every time you add a new field.

 if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div class="note"><div class="col-md-3"><div class="form-group"><input type="text" class="form-control border-input money" placeholder="Amount" value="" id="debit['+ x +'][amount]" name="debit['+ x +'][amount]"></div></div><div class="col-md-3"><div class="form-group"><input type="date" class="form-control border-input" placeholder="Date" id="debit['+ x +'][ddate]" name="debit['+ x +'][ddate]"></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control border-input" id="debit['+ x +'][details]" name="debit['+ x +'][details]" placeholder="Details of Transaction"></div></div><div class="col-md-1"><a href="#" class="remove_field_debit_edit"><i class="fa fa-trash icon-trash"></i></a></div></div></div><div>'); //add input box

         //Adicione este fragmento de código:
         $('.money').maskMoney();

        }