datepicker и maskmoney не работают на динамическом столе (добавлено) jquery

Question

Я пытаюсь создать динамическую таблицу, в которой пользователь может добавлять или удалять строки, используя jquery.

В моей таблице есть поле для ввода с datepicker, а другое с maskmoney.

я использую https://cdnjs.com/libraries/bootstrap-material-datetimepicker Для выбора даты и времени

и https://plugins.jquery.com/maskMoney/ Для маски денег.

Моя функция для выбора даты и времени:

$('.datepicker').bootstrapMaterialDatePicker({
    format: 'DD-MM-YYYY',
    clearButton: true,
    weekStart: 1,
    time: false
});

Для строки по умолчанию:

    <table class="table table-bordered" id="stuff-table">
    <thead>
        <th>#</th>
        <th>Name</th>
        <th>Date</th>
        <th>Price</th>
        <th>QTY (pcs)</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>
                <input type="text" class="form-control" placeholder="..." name="name-1" id="name-1" />
            </td>
            <td>
                <input type="text" class="datepicker form-control" placeholder="..." name="date-1" id="date-1">
            </td>
            <td>
                <input type="text" class="form-control" placeholder="..." name="price-1" id="price-1" />
            </td>
            <td>
                <input type="text" class="form-control" placeholder="..." name="qty-1" id="qty-1" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <a href="javascript:void(0);" id="add_row" type="button" class="btn bg-green btn-xs waves-effect">
                    <i class="material-icons">add</i>
                </a>
            </td>
            <td colspan="6">
                <button class="btn bg-blue btn-xs btn-block wave-effects">
                    <i class="material-icons">save</i> SAVE
                </button>
            </td>
        </tr>
    </tbody>
</table>


    <script type="text/javascript">
        $(document).ready(function(){
            $('#price-'+i).maskMoney({thousands:'.', decimal:',', precision:0});
            $('#qty-'+i).maskMoney({thousands:'.', decimal:',', precision:0});
        });
    </script>

все отлично работает при первой загрузке, но, когда другие строки, сгенерированные с помощью jquery, datepicker и maskmoney, не работают.

Вот моя функция для добавления новой строки:

 <script type="text/javascript">
        var row             = parseInt($('#stuff-table tr').length)-2;
        var increment       = row+1;
        var tr_open         = '<tr>';
        var td_increment    = '<td>'+increment+'</td>';
        var td_name         = '<td><input type="text" class="form-control" placeholder="..." name="name-'+increment+'" id="name-'+increment+'" /></td>';
        var td_date      = '<td><input type="text" class="datepicker form-control" placeholder="..." id="date-'+increment+'" name="date-'+increment+'"></td>';
        var td_price        = '<td><input type="text" class="form-control" placeholder="..." id="price-'+increment+'" name="price-'+increment+'"></td>';
        var td_qty          = '<td><input type="text" class="form-control" placeholder="..." id="qty-'+increment+'" name="qty-'+increment+'"></td>';
        var tr_close        = '</tr>';

        $('#stuff-table tr:last').before(data);

        var data            = tr_open+td_increment+td_name+td_date+td_price+td_qty+tr_close;


        $('#price-'+increment).maskMoney({thousands:'.', decimal:',', precision:0});
    </script>

кто-нибудь знает почему? есть ли решение для этого?

Заранее спасибо.

=============================================== ===========================

Я решил этот случай простым способом. Просто добавьте функцию для обратного вызова moneymask и datetimepicker после добавления данных в таблицу.

вот код:

<script type="text/javascript">
            var row             = parseInt($('#stuff-table tr').length)-2;
            var increment       = row+1;
            var tr_open         = '<tr>';
            var td_increment    = '<td>'+increment+'</td>';
            var td_name         = '<td><input type="text" class="form-control" placeholder="..." name="name-'+increment+'" id="name-'+increment+'" /></td>';
            var td_date      = '<td><input type="text" class="datepicker form-control" placeholder="..." id="date-'+increment+'" name="date-'+increment+'"></td>';
            var td_price        = '<td><input type="text" class="form-control" placeholder="..." id="price-'+increment+'" name="price-'+increment+'"></td>';
            var td_qty          = '<td><input type="text" class="form-control" placeholder="..." id="qty-'+increment+'" name="qty-'+increment+'"></td>';
            var tr_close        = '</tr>';

            var data            = tr_open+td_increment+td_name+td_date+td_price+td_qty+tr_close;

            $('#stuff-table tr:last').before(data);


            $('#price-'+increment).maskMoney({thousands:'.', decimal:',', precision:0});

            $('.datepicker').bootstrapMaterialDatePicker({
                format: 'DD-MM-YYYY',
                clearButton: true,
                weekStart: 1,
                time: false
            });
        </script>