Question

我正在尝试创建一个包含联系人的表单。可以有任意数量的联系人，每个联系人可以有任意数量的电子邮件和电话号码。我正在使用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？这完全是错误的做法吗？我很感激我能得到的任何意见。非常感谢你。

Answer 1

放弃“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);
});

Answer 2

我会在javascript中处理点击事件，而不是在html标签中。我也会使用.clone（）来生成html。如果你需要更改html，那么你只需要在内容中更改它，而不是在你的javascript中更改它。

当您处理点击事件时，您可以根据“this”关键字了解点击的来源。

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

一旦有了这个上下文，就可以上下移动DOM来设置你需要的内容。

使用jQuery创建任意数量的子字段

2 个答案: