How do we set mask on a dynamically inserted input?

Question

Since Angular-UI-Mask is acting oddly, I'm using jquery-inputmask to some of my inputs, but when an input is dynamically inserted ny Angular it gets no mask:

<li ng-repeat="item in items">
    <input type="text" name="birth_date" class="span2 format_date" ng-model="birth_date" placeholder="Data de Nascimento" required />
</li>

This is the related script

<script type="text/javascript">
    jQuery(document).ready(function(){
        $(".format_date").inputmask("99/99/9999");
    });
</script>

Is there anything I can do to force it to set the mask to new inputs?

Answer 1

jQuery plugins like jQuery.inputMask work by (as your code shows) attaching behaviour to DOM elements when the document is 'ready'. This will run once, and never again, so for dynamically-added content this approach doesn't work.

Instead, you need something that will run whenever the corresponding DOM is changed. So whenever an 'item' in your 'items' list is added, the element is added and the corresponding jQuery function is run against that element. You need to use AngularJS for this and you could write your own directive, but thankfully, someone has already written the code for you: the jQuery Passthrough plugin as part of Angular UI's UI.Utils.

Here is a working Plunkr.

You need to include the script at the top, like so (I downloaded it from GitHub):

<script src="ui-utils.jq.js"></script>

Load the module into AngularJS, for example:

var app = angular.module('myApp', ['ui.jq']); 

And then use the directive in your HTML markup:

<input type="text" ui-jq="inputmask" ui-options="'99/99/9999', { 'placeholder': 'dd/mm/yyyy' }" />