0

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

4

2 回答 2

0

放弃“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-25T17:41:02.067 回答
0

我会在 javascript 中处理点击事件，而不是在 html 标记中。我也会使用 .clone() 来生成 html。如果您需要更改 html，最好只在内容中更改它，而不是在您的 javascript 中更改。

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

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

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

于 2013-04-25T17:49:45.493 回答