Javascript jQuery动态附加表单

当用户单击链接时，我试图将表单附加到div。我已经编写了完成我任务的示例代码，但是，我想知道如何防止函数对表单进行多次迭代

这是我的密码：

<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
    function moveForm(element) {
        $("#"+element).append('<div id="oneForm"> <form name="myForm" id="myForm" method="post" action=""><input type="text" id="'+element+'">  <input type="button" name="myButton" value="Test" /></form></div>');
}
</script>

<div style="border-color:black; border-style:dashed;">
<div id="myItem_1">
Item #1 <a href="javascript:moveForm('myItem_1')">View Form</a>
</div>
<div id="myItem_2">
Item #2 <a href="javascript:moveForm('myItem_2')">View Form</a>
</div>
<div id="myItem_3">
Item #3 <a href="javascript:moveForm('myItem_3')">View Form</a>
</div>
</div>

函数形式（元素）{
$（“#”+元素）。追加（“”）；
}
项目#1
项目#2
项目#3

正如您所看到的，上面的代码是有效的，但是当您单击任何“查看表单”链接时，表单会出现无限次，并且每个元素都会出现。我希望表单只显示一次，无论单击哪个“查看表单”链接。我还希望表单显示在正确的元素下，例如：

如果我单击项目1的“查看表单”，表单应显示在“项目1”下面

如果我随后单击第3项的“查看表单”，表单应显示在“第3项”下面，而“第1项”则应消失

我想我的思路是对的，但我需要一些帮助

---

提前感谢您。

删除内联事件处理程序（它们是不好的做法，您真的不需要它们，尤其是在使用jQuery时），并为您的链接提供一个类：

---

用于此版本。
删除内联事件处理程序（它们是不好的做法，您确实不需要它们，尤其是在使用jQuery时），并为链接提供一个类：

此版本的
。
先将其删除：

function moveForm(element) {
  $('#oneForm').remove()
  $("#"+element).append('<div id="oneForm"> <form name="myForm" id="myForm" method="post" action=""><input type="text" id="'+element+'">  <input type="button" name="myButton" value="Test" /></form></div>');
}

函数移动形式（元素）{
$（'#oneForm'）。删除（）
$（“#”+元素）。追加（“”）；
}
首先将其删除：

function moveForm(element) {
  $('#oneForm').remove()
  $("#"+element).append('<div id="oneForm"> <form name="myForm" id="myForm" method="post" action=""><input type="text" id="'+element+'">  <input type="button" name="myButton" value="Test" /></form></div>');
}

函数移动形式（元素）{
$（'#oneForm'）。删除（）
$（“#”+元素）。追加（“”）；
}
每次删除
oneForm
：

这里有一个例子


函数形式（元素）{
$（'#oneForm'）。删除（）；
$（“#”+元素）。追加（“”）；
}
项目#1
项目#2
项目#3
每次删除
oneForm
：

这里有一个例子


函数形式（元素）{
$（'#oneForm'）。删除（）；
$（“#”+元素）。追加（“”）；
}
项目#1
项目#2
项目#3
应该是id=$（this）.parent（）.attr（'id'）@Nilloc-我不明白你的意思。。。我就是这么做的，詹姆斯！第二个例子正是我想要的。我真的很感谢你的帮助，以及你的反应是多么彻底。再次感谢。祝你周末愉快@喵-没问题，很高兴我能帮上忙：）@James，在你修改它之前我发表了我的评论，你可以在历史记录中看到在你编辑之前它是
$（this.parent（）.id
，这在Chrome/Safari中是不起作用的。应该是id=$（this.parent（）.attr（'id'）@Nilloc-我不明白你的意思。。。我就是这么做的，詹姆斯！第二个例子正是我想要的。我真的很感谢你的帮助，以及你的反应是多么彻底。再次感谢。祝你周末愉快@喵-没问题，很高兴我能帮上忙：）@James，在你修改之前我发表了我的评论，你可以在历史记录中看到在你编辑之前它是
$（this）.parent（）.id
，这在Chrome/Safari中是不起作用的。
function moveForm(element) {
  $('#oneForm').remove()
  $("#"+element).append('<div id="oneForm"> <form name="myForm" id="myForm" method="post" action=""><input type="text" id="'+element+'">  <input type="button" name="myButton" value="Test" /></form></div>');
}

<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script language="javascript" type="text/javascript">
    function moveForm(element) {

        $('#oneForm').remove();   

        $("#"+element).append('<div id="oneForm"> <form name="myForm" id="myForm" method="post" action=""><input type="text" id="'+element+'">  <input type="button" name="myButton" value="Test" /></form></div>');
}
</script>

<div style="border-color:black; border-style:dashed;">
<div id="myItem_1">
Item #1 <a href="javascript:moveForm('myItem_1')">View Form</a>
</div>
<div id="myItem_2">
Item #2 <a href="javascript:moveForm('myItem_2')">View Form</a>
</div>
<div id="myItem_3">
Item #3 <a href="javascript:moveForm('myItem_3')">View Form</a>
</div>
</div>