Onchange function in Javascript, only works with TAB in Bootstrap

Question

Good night.

I have a bootstrap form with modal that when entering the values, the calculation is only performed after giving a TAB to change field.

But doing the test here, Joins with TAB and clicking with the mouse in another field. I don’t understand why Bootstrap with Modal only works with TAB.

You know how I can fix this?

$("#percentualDesconto").change(function () {
                    var valor = $("#valor_compra").val();
                    var valorDesconto = valor * (parseFloat($(this).val()) / 100);
                    var valorArrendodado = parseFloat(valorDesconto.toFixed(2));
                    $(".desconto").val(valorArrendodado);
                    var Valor1 = parseFloat($('.desconto').val());
                    var Valor1Arrendodado = parseFloat(Valor1.toFixed(2));

                    var resultadoFinal = valor - Valor1Arrendodado;
                    if (Number.isNaN(resultadoFinal)) {
                        TotFR = 0;
                        $('#valor_desconto').val(resultadoFinal.toFixed(2));
                    } else {
                        $('#valor_desconto').val(resultadoFinal.toFixed(2));
                    }
                });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="row">                                        
                                        <div class="form-group col-md-3">
                                            <label for="valor_compra">Valor Compra</label>                                 
                                            <input type="text" class="form-control" id="valor_compra" name="valor" value="0.00"  >
                                        </div>
                                        <div class="form-group col-md-3">
                                            <label for="percentualDesconto">Desconto(%)</label>                                
                                            <input type="text" class="form-control " name="percentualDesconto" value="0.00" id="percentualDesconto" title="Informe o percentual"  size="15" maxlength="25" placeholder="0.00 %"  >
                                        </div>
                                        <div class="form-group col-md-3">
                                            <label for="desconto">Desconto</label>                                 
                                            <input type="text" class="form-control desconto" id="desconto" name="desconto" value="0.00" readonly >
                                        </div>
                                        <div class="form-group col-md-3">
                                            <label for="valor_desconto">Valor Final </label>                                 
                                            <input type="text" class="form-control" id="valor_desconto" name="valorComDesconto" value="0.00" readonly >
                                        </div>
                                    </div>

Answer 1

Good evening, excuse me, I removed the maskMoney library: https://plugins.jquery.com/maskMoney/

And now it works, I will only study a solution to prevent the user to put "comma" instead of "point".