jQuery动态添加表单

jQuery attaching a form dynamically

本文关键字：表单 添加 动态 jQuery      更新时间：2023-09-26

我试图在用户单击链接时将表单附加到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>

正如您所看到的，上面的代码可以工作，但是当您单击任何"View Form"链接时，表单会出现无限次，并且也会出现在每个元素中。我希望表单只出现一次，无论点击哪个"查看表单"链接。我还希望表单显示在正确的元素下，例如:

如果我点击item# 1的"查看表单"，表单应该出现在"item# 1"下面。

如果我接着点击item# 3的"查看表单"，表单应该出现在"item# 3"的下面，而在"item# 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方法删除先前添加的(如果有的话)元素。

下面是一个工作示例。

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

这个版本还有一个例子

先删除:

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:

这是它的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>
相关文章：