2014-03-31 120 views
0

我爲項目創建了註冊表單,但出現問題。我的表單所做的是讓用戶點擊「添加聯繫人」按鈕並動態地在頁面上顯示更多輸入框,以便用戶可以鍵入其他用戶。所有的工作除了jquery蒙面。 jquery工作在頁面上的任何默認文本輸入,但不適用於任何JavaScript生成的輸入。Jquery蒙面輸入不適用於動態添加的輸入

希望有人理解我所解釋 我現在用的是下面的蒙面輸入 http://digitalbush.com/projects/masked-input-plugin/

而下面是我的JavaScript和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; 
     } 
     } 

以上是我的HTML的頭 然後在我身體的身體我有

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

如果我將上面的JavaScript中列出的任何輸入作爲屏蔽輸入,並將其添加到屏蔽輸入工作的頁面主體中。 我希望有人可能會有一個建議。

我試過把含有蒙面輸入代碼的js文件放在頁面的底部,並試圖讓它在頁面的頂部,但沒有運氣。 感謝

回答

0

某處在你的腳本,你必須初始化類似輸入蒙面插件:$("#phone").mask("(999) 999-9999"); 當您在addInput(),他們不會被初始化動態添加元素。你可以做到這一點。不過,我認爲從一開始就將所有內容添加到身體中會更容易,並且隱藏「動態」元素。這樣你會讓他們初始化。當用戶點擊「添加聯繫人」時,您可以像這樣的fiddle一個接一個地顯示他們。

編輯:更新的鏈接