Problem to apply a jQuery mask to a modal

Question

I have an HTML modal and in it there are two text fields that should receive dates, I am trying to apply a jQuery mask to these fields, but I was not successful, the mask usually applies when the fields are not part of the modal.

HTML code:

<div id="modalNovaCrise" data-backdrop="static" class="modal fade" role="dialog"  style="min-width: 1050px;">
    <form id="formNovaCrise" action="#">
    <div class="col-md-offset-3 mg-tp-15">
        <!-- Modal content-->
        <div class="modal-content col-md-8">
            <div id="newCrise" class="mg-tp-15" >
                <!-- ko with: novaCrise-->

                    <fieldset>
                        <legend>Previsões</legend>

                        <div class='col-md-12 col-sm-12'>
                            <div class='row'>
                                <div class='form-group'>
                                    <div class="col-md-6 col-sm-6">
                                        <input id="prevSolucao" data-bind="value: prevSolucao, enable: !semPrevisao()" placeholder="Previsão de solução" type="text" class="inpText" style="padding-left: 13px;">
                                        <input type="checkbox" data-bind="checked: semPrevisao, click: clearSemPrevisao"  name="Sem Previsão" style="vertical-align: middle;">
                                        <span style="vertical-align: middle;">À Definir</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class='col-md-12 col-sm-12'>
                            <div class='row'>
                                <div class='form-group '>
                                    <div class="col-md-12 col-sm-12">
                                        <input id="proxAtual" data-bind="value: proxAtualizacao" placeholder="Próxima atualização" type="text" class="form-control"  style="padding-left: 13px;">
                                    </div>
                                </div>
                            </div>
                            <div class='row'>
                                <div class='form-group '>
                                    <div class="col-md-12 col-sm-12">
                                        <textarea data-bind="value: observacao" class="form-control" placeholder="Observação" id="Observacao" style="margin-bottom: 8px;"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </fieldset>
                <!-- /ko -->
            </div>
        </div>
    </div>
    </form>
</div>

Javascript:

$(document).ready(function() {
    ko.applyBindings(novaCriseVM, $('#newCrise')[0]);

    $("#proxAtual").mask("99/99/9999 99:99"); 
    $("#prevSolucao").mask("99/99/9999 99:99"); 
});

I believe the problem is related to the use of modal.

Answer 1

To work jquery code

>    $("#proxAtual").mask("99/99/9999 99:99"); 
>    $("#prevSolucao").mask("99/99/9999 99:99");

It must be executed after the inputs are rendered on the screen, if you run before it will not work. If you load dynamically(the inputs), after loading you should call them again to apply the mask.

That’s why you use the $(document).ready(), is nothing more than the page is rendered? then run it now.