Javascript 每次我点击jQuery.append函数时,HTML表单都会翻倍
我正在尝试创建一个表单,其中一个输入字段用于用户任务,三个选择选项用于任务的小时、分钟和am/PM。我想创建一个按钮,在它下面添加相同的表单,这样用户就可以用相同的字段输入另一个任务。问题是,每当我在按钮上使用jqueryappend函数时,它都会加倍对表单的追加。如何使表单在用户单击按钮后仅生成一次?下面是我的表单和Javascript代码:Javascript 每次我点击jQuery.append函数时,HTML表单都会翻倍,javascript,php,jquery,html,append,Javascript,Php,Jquery,Html,Append,我正在尝试创建一个表单,其中一个输入字段用于用户任务,三个选择选项用于任务的小时、分钟和am/PM。我想创建一个按钮,在它下面添加相同的表单,这样用户就可以用相同的字段输入另一个任务。问题是,每当我在按钮上使用jqueryappend函数时,它都会加倍对表单的追加。如何使表单在用户单击按钮后仅生成一次?下面是我的表单和Javascript代码: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.mi
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form method="post">
<div class="form-group" style="text-align:center">
<h4>Task</h4>
<input type="text" class="form-control" placeholder="Task" name="taskname" required>
</div>
<br>
<div class="form-group">
<h4 style="text-align:center">What time do you want me to remind you about this task?</h4>
<center>
<select name="remind_endtime_hour" required>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="remind_endtime_minute" required>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>
<select name="remind_endtime_AM_PM" required>
<option value="AM">AM</option>
<option value="PM">PM</option>
</select>
<hr>
</center>
</div>
</form>
<center><a href="#" id="addMore">+ Add Another Task</a></center>
<br>
<br>
<center><input class="btn btn-primary" type="submit" name="submit" value="Submit" style="width: auto; height: auto; font-size: 25px; text-align: center;" required></center>
</body>
任务
你想让我什么时候提醒你这项任务?
00
01
02
03
04
05
06
07
08
09
10
11
12
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
是
颗粒物
Javascript
<script>
jQuery("#addMore").click(function(){
var contents = jQuery("form").html();
jQuery('form').append(contents);
});
</script>
jQuery(“#添加更多”)。单击(函数(){
var contents=jQuery(“form”).html();
jQuery('form')。追加(contents);
});
您可以使用one()
方法仅侦听一次
jQuery("#addMore").one('click', function(){
// .....
});
更新1:它正在复制现有表单元素,因此第二次它也将复制以前附加的元素。因此,为了修复在变量中缓存HTML
var contents = jQuery("form").html();
jQuery("#addMore").click(function(){
jQuery('form').append(contents);
});
更新2:要添加删除按钮,只需将元素包装在div中,并在其中保留一个关闭按钮。绑定按钮的单击事件处理程序以删除新添加的表单节
var contents = `<div> <button class="remove" type="button">X<button>
${jQuery("form").html()}
</div>`;
jQuery("#addMore").click(function(){
jQuery('form').append(contents);
});
// listener for remove button, with help of event delegation
jQuery('form').on('click', '.remove',function(e){
e.preventDefault();
$(this).parent().remove();
});
var contents=`X
${jQuery(“form”).html()}
`;
jQuery(“#添加更多”)。单击(函数(){
jQuery('form')。追加(contents);
});
//在事件委派的帮助下,删除按钮的侦听器
jQuery('form')。在('click','remove',函数(e)上{
e、 预防默认值();
$(this.parent().remove();
});
如果您想在每次单击按钮时添加相同的表单,那么您只需对jQuery代码进行少量更改
<script>
var contents = jQuery("form").html();
jQuery("#addMore").click(function(){
jQuery('form').append(contents);
});
</script>
var contents=jQuery(“form”).html();
jQuery(“#添加更多”)。单击(函数(){
jQuery('form')。追加(contents);
});
这工作非常好!我想知道,如何添加一个删除按钮来删除用户添加的最后一个表单?jQuery(“表单”).last().remove();联系我与我取得联系这种方法使它只会生成另一个表单,而不会在以后生成另一个表单。我想这不是我想要的。非常感谢你,这很有效。但每当我点击按钮,页面就会刷新,所有内容都会被删除。如何使它们中只有一个被删除,而其他的仍然保留?@YashBob:将其类型设置为button或addevent.preventDefault()
。。。。。检查更新的答案这是可行的,但现在的问题是整个表单变成了一个带有轮廓和内容的按钮。@YashBob:您可以根据需要使用css进行自定义。。。按钮也可以替换为图标。