用jQuery創建任意數量的子字段

我試圖創建一個包含聯繫人的表單。可以有任意數量的聯繫人，每個聯繫人可以有任意數量的電子郵件和電話號碼。我使用jQuery來創建額外的字段，一切都很好，直到你添加一個新的聯繫人，並嘗試添加任意的子字段。我無法弄清楚如何將它們添加到窗體中，以便它們與調用函數的接觸塊關聯。用jQuery創建任意數量的子字段

這裏是我嘗試使用的簡單HTML，以顯示問題。

<div class="contactinfo"> 
    Contact: <input name="contactname" type="text" /><br /> 
    <div class="contactemail"> 
     Email: <input name="contactemail" type="text" /><br /> 
    </div> 
    <a href="javascript:addEmail()">Add Email</a><br /> 
</div> 
<a href="javascript:addContact()">Add Contact</a><br />

而這裏的jQuery的：

function addEmail() { 
    var newemail = '<div class="contactemail">' + 
     'Email: <input name="contactemail" type="text" /><br />' + 
     '</div>'; 
    $('.contactemail:last').append(newemail); 
} 

function addContact() { 
    var newcontact = '<div class="contactinfo">' + 
     'Contact: <input name="contactname" type="text" /><br />' + 
     '<div class="contactemail">' + 
     'Email: <input name="contactemail" type="text" /><br />' + 
     '</div>' + 
     '<a href="javascript:addEmail()">Add Email</a><br />' + 
     '</div>'; 
    $('.contactinfo:last').append(newcontact);  
}

（我知道:last是不是正確的選擇。）

有沒有一種方法可以讓我知道哪些接觸塊調用的函數和在哪裏追加新的HTML？這完全是錯誤的方法嗎？我會很感激我可以得到的任何輸入。非常感謝你。

來源

2013-04-25 moexu

我會在javascript中處理點擊事件，而不是在html標記中。我也會爲你的html代使用.clone（）。如果您需要更改html，那麼更好，您只需在內容中更改它，而不是在JavaScript中更改。

當您處理點擊事件時，您可以根據「this」關鍵字知道點擊來自哪裏。

addEmail.click(function(){ 
    $(this); // refers to the element that was clicked 
});

一旦擁有了該上下文，就可以上下移動DOM來設置所需的內容。

來源

2013-04-25 17:49:45 nick

放棄「的javascript：addEmail（）」，而是做到這一點（如果我理解正確您的問題）：

HTML

<a class="contact" href="#">...</a>

jQuery的

$('a.contact').click(function() { 
    var newcontact = '<div class="contactinfo">' + 
    'Contact: <input name="contactname" type="text" /><br />' + 
    '<div class="contactemail">' + 
    'Email: <input name="contactemail" type="text" /><br />' + 
    '</div>' + 
    '<a href="javascript:addEmail()">Add Email</a><br />' + 
    '</div>'; 

    $(this).parents('div.contactinfo').append(newcontact); 
});

來源

2013-04-25 17:41:02

用jQuery創建任意數量的子字段

回答

相關問題