Jquery 屏蔽輸入\不適用於動態添加的輸入

Question

我正在為一個項目創建注冊表單，但遇到了問題。 我的表單所做的是使用戶能夠單擊“添加聯系人”按鈕並動態地在頁面上顯示更多輸入框，以便用戶可以輸入其他用戶。 除了被屏蔽的 jquery 之外，一切正常。 jquery 適用於頁面上的任何默認文本輸入，但不適用於任何 javascript 生成的輸入。

希望有人理解我在解釋什么我正在使用下面的屏蔽輸入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 文件放在頁面底部，也嘗試將它放在頁面頂部，但沒有成功。 謝謝

Answer 1

您必須在腳本中的某個位置為輸入類似於以下內容初始化被屏蔽的插件： $("#phone").mask("(999) 999-9999"); 在addInput（）中動態添加元素時，不會對其進行初始化。 你可以那樣做。 但是，我認為從一開始就將身體中的所有內容都添加進去，並隱藏“動態”元素會更容易。 這樣，您將對其進行初始化。 當用戶單擊“添加聯系人”時，您可以像在此小提琴中那樣一個接一個地顯示他們。

編輯：更新的鏈接

Answer 2

添加新輸入后，您必須調用掩碼。

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

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

如果您有多個掩碼，請將所有掩碼都放在 function 中。您可以在頁面加載時和每次添加新輸入時調用 function。