Jquery Masked input \not working on dynamically added inputs

Question

I am creating a signup form for a project however having an issue. What my form does is enable a user to click a "add contact" button and dynamically have more input boxes appear on the page so that the user can type in additional users. All is working except for the jquery masked. The jquery works an any default text input on the page but does not work on any javascript generated input.

Hoping someone understands what I am explaining I am using the below for the masked input http://digitalbush.com/projects/masked-input-plugin/

And below is my javascript and html

   <script language="javascript">
     fields = 0;
     function addInput() {
       if (fields != 5) {
        document.getElementById('text').innerHTML += "<div class='row-fluid'><div class='span5 clearfix'><h4 class='heading_b'>Company Address</h4><input type='text' name='company_address[]' class='span11'></div></div><div class='row-fluid'><div class='span5 clearfix' style='width:300px'><h4 class='heading_b'>Company City</h4><input type='text' name='company_city[]' class='span5'></div><div class='span4 clearfix' style='width:300px'><h4 class='heading_b'>Company State</h4><select name='company_state[]' class='span4'><option value='AL'>AL</option><option value='AK'>AK</option><option value='AZ'>AZ</option><option value='AR'>AR</option><option value='CA'>CA</option><option value='CO'>CO</option><option value='CT'>CT</option><option value='DE'>DE</option><option value='DC'>DC</option><option value='FL'>FL</option><option value='GA'>GA</option><option value='HI'>HI</option><option value='ID'>ID</option><option value='IL'>IL</option><option value='IN'>IN</option><option value='IA'>IA</option><option value='KS'>KS</option><option value='KY'>KY</option><option value='LA'>LA</option><option value='ME'>ME</option><option value='MD'>MD</option><option value='MA'>MA</option><option value='MI'>MI</option><option value='MN'>MN</option><option value='MS'>MS</option><option value='MO'>MO</option><option value='MT'>MT</option><option value='NE'>NE</option><option value='NV'>NV</option><option value='NH'>NH</option><option value='NJ'>NJ</option><option value='NM'>NM</option><option value='NY'>NY</option><option value='NC'>NC</option><option value='ND'>ND</option><option value='OH'>OH</option><option value='OK'>OK</option><option value='OR'>OR</option><option value='PA'>PA</option><option value='RI'>RI</option><option value='SC'>SC</option><option value='SD'>SD</option><option value='TN'>TN</option><option value='TX'>TX</option><option value='UT'>UT</option><option value='VT'>VT</option><option value='VA'>VA</option><option value='WA'>WA</option><option value='WV'>WV</option><option value='WI'>WI</option><option value='WY'>WY</option></select></div><div class='span3 clearfix'><h4 class='heading_b'>Company Zip</h4><input type='text' name='company_zip[]' class='span3' maxlength='5'></div></div><div class='row-fluid'><div class='span5 clearfix' style='width:300px'><h4 class='heading_b'>Landload/Mortgage Company</h4><input type='text' name='company_landlordcompany[]' class='span8'></div><div class='span5 clearfix' style='width:250px'><h4 class='heading_b'>Rent/Mortgage Amt</h4><input type='text' name='companyrentamt[]' class='span4'></div><div class='span5 clearfix' style='width:300px'><h4 class='heading_b'>Landlord Contact Name</h4><input type='text' name='business_landlordname[]' class='span8'></div><div class='span5 clearfix' style='width:290px'><h4 class='heading_b'>Landlord Contact Phone</h4><input type='text' name='business_landlordphone[]' class='span6 mask_phone'></div></div>";
        fields += 1;
        } else {
        document.getElementById('text').innerHTML += "<br />Only 5 addresses are allowed.";
        document.form.add.disabled=true;
        }
        }

The above is in the head of my html page then in the body in my form I have

<div id='text'>  </div>

If I take any of the inputs that are listed in the above javascript that has a masked input and add it to the body of the page the masked input works. I am hoping someone may have a suggestion.

I have tried taking the js file that contains the masked input code and putting it at the bottom of the page and also tried having it at the top of the page but have had no luck. Thanks

Answer 1

Somewhere in your script you must have initialized the masked plugin for the inputs similar to: $("#phone").mask("(999) 999-9999"); When you add elements dynamically in addInput() they are not initialized. You could do that. However I think it would be easier for you to add everything in the body from the start, and have the "dymamic" elements hidden. That way you will have them initialized. When the user clicks "add contact" you can show them one after another like in this fiddle .

edit: updated link

Answer 2

You must call your mask after adding your new inputs.

//clone or add your new input
var template = $(".template").clone();
template.appendTo(".newdivs");

//Then call your masks
$('.mask-tel').mask('(000) 000-0000');

If you have multiple masks, put all your masks in a function. You can call that function on pageload and everytime you add a new input.