javascript - How to maintain the jquery inputmask when the DOM is updated? -

hard describe. here snippet.

(function() {    var phonenumber = function() {      this.name = ko.observable();      this.phone = ko.observable();    };      $('[data-mask="phone"]').inputmask({      mask: '(999)999-9999'    });          var vm = {      newnumber: ko.observable(new phonenumber()),      numbers: ko.observablearray([]),    };      console.log('vm', vm.numbers());        vm.numbersjson = ko.computed(function() {      return ko.tojson(vm.numbers);    });    vm.newnumberjson = ko.computed(function() {      return ko.tojson(vm.newnumber);    });      ko.applybindings(vm);        //events    function addnewnumber() {      vm.numbers.push(vm.newnumber());      vm.newnumber(new phonenumber());    }      function removenumber() {      var item = ko.datafor(this);      var remval = _.reject(vm.numbers(), function(el) {        return el.name === item.name;      });      vm.numbers(remval);    };      $(document).on('click', '#btnadd', addnewnumber);    $(document).on('click', '.btnremove', removenumber);  })();

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>  <script src="https://rawgit.com/robinherbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>  <table class="table table-condensed table-hover table-striped table-bordered">    <thead>      <tr>        <th>name</th>        <th>phone</th>        <th></th>      </tr>    </thead>    <tbody data-bind="foreach:numbers">      <tr>        <td><span data-bind="text:name"></span>        </td>        <td><span data-bind="text:phone"></span>        </td>        <td class="form-group">          <button class="btn btn-sm btnremove btn-default" type="button"> <i class="fa fa-trash"></i>            </button>        </td>      </tr>    </tbody>    <tfoot data-bind="with:newnumber">      <tr>        <td>          <input type="text" class="input-sm form-control" data-bind="textinput:name" />        </td>        <td>          <input type="text" class="input-sm form-control" data-mask="phone" data-bind="textinput:phone" />        </td>        <td>          <button class="btn btn-sm btn-default" id="btnadd" type="button"><i class="fa fa-plus"></i>          </button>        </td>      </tr>    </tfoot>  </table>  <h2>values</h2>  <p>numbers: <span data-bind="text:numbersjson"></span>  </p>  <p>new number:    <span data-bind="text:newnumberjson"></span>  </p>

please note there phone inputmask in place when dom ready. when type in phone textbox, input mask effective.

but after first record added array , textbox cleared, input mask lost.

question: how can keep input mask on textbox?

the easiest thing put mask-setting code in addnewnumberroutine.

function setmask() {     $('[data-mask="phone"]').inputmask({         mask: '(999)999-9999'     }); }  vm.addnewnumber = function () {     vm.numbers.push(vm.newnumber());     vm.newnumber(new phonenumber());     settimeout(setmask, 0); }; 

i made a fiddle. better custom binding, but, said, easiest.

now i've made custom binding handler in another fiddle. saves on searching elements mask, because knows element on.

ko.bindinghandlers.phonetextinput = {     init: function (element, valueaccessor, allbindings, data, context) {         ko.bindinghandlers.textinput.init(element, valueaccessor, allbindings, data, context);          $(element).inputmask({             mask: '(999)999-9999'         });     } }