jQuery附加动态表格

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

这附加一个单击事件处理程序与类“formLink”的所有元素，这将只运行一次（这是one方法的点）。在事件处理程序中，可以使用after方法在clicked元素后面插入内容，并使用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>