Question

Currently i’m using the iMask script to help perform masking and sanity check on my input for interest rate. It works great when all the input are loaded at the same time on the page. However, when i use ajax call to dynamically add in new input, those input are not being monitored by the iMask script.

My loaded this input:

<input type="text" id="interestRate" size="25" class="numeric" name="interestRate" value=""/>

and loaded the iMask using the code below at the bottom:

<script type="text/javascript">
    jQuery('.numeric').iMask({
          type: 'number'             
         ,sanity : function( val ){
            if(val.length > 5){
                return val.substr(0,5);
            }else{
                return val;
            }
        }
    });

This works fine. But if i use ajax to append a new row of data, with additional input for interestRate, those new input would not be masked by the iMask.

I wonder is there anyway that i can make the ajax returned html to be ‘assigned’ with the iMask function as well.

Thanx

Answer 1

I believe you have to call iMask function on all new elements that you insert with Ajax. Be careful not to call it for elements that you already iMasked, not sure if iMask can handle it gracefully.

This is how I would do it:

var alreadyIMasked = $('.numeric'); // save already iMasked elements before an ajax call
$.ajax({
  url: '...',
  success: function( data ) {
    $(".some_list").append(data); // append your new elements to the list
    $('.numeric').not(alreadyIMasked).iMask({.....});
  }
});