Question

我正在尝试在用户点击链接时将表单附加到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的“查看表单”，表单应显示在“项目＃1”下。

如果我点击第3项的“查看表单”，表单应显示在“项目＃3”下面，并且对于“项目＃1”应该会消失。

我认为我走在正确的轨道上，但我可以使用一些帮助。

提前谢谢。

Answer 1

删除内联事件处理程序（它们是不好的做法，你真的不需要它们，特别是当你使用jQuery时）并给你的链接一个类：

<a href="#" class="formLink">

然后使用以下jQuery：

$(".formLink").one("click", function() {
   $("#oneForm").remove();
   $(this).after('<div id="oneForm"> <form name="myForm" id="myForm" method="post" action=""><input type="text" id="'+ $(this).parent().attr("id") +'">  <input type="button" name="myButton" value="Test" /></form></div>'); 
});

这会将click事件处理程序附加到具有类“formLink”的所有元素，该类仅运行一次（这是one方法的点）。在事件处理程序中，您可以使用after方法在单击的元素后插入内容，使用remove方法删除以前添加的（如果有）元素。

这是working example。

<强>更新

我实际上并不是100％确定上述内容是否符合您的要求（如果您单击一个链接，那么另一个链接，则无法再次单击第一个链接）。如果您希望能够这样做，请改用它（普通的click事件处理程序，而不是one方法）：

$(".formLink").click(function() {
    $("#oneForm").remove();
    $(this).after('<div id="oneForm"> <form name="myForm" id="myForm" method="post" action=""><input type="text" id="'+ $(this).parent().attr("id") +'">  <input type="button" name="myButton" value="Test" /></form></div>'); 
});

这是此版本的另一个example。

Answer 2

先删除它：

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>');
}

Answer 3

每次都删除oneForm：

以下是jsFiddle。

<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>

jQuery动态附加表单

3 个答案: