每次我点击 jQuery.append 函数时，HTML 表单都会翻倍

Posted 2023-03-11

【中文标题】每次我点击 jQuery.append 函数时，HTML 表单都会翻倍

【英文标题】：HTML Form is being doubled every single time I hit a jQuery.append function

【发布时间】：2020-07-22 21:58:06

【问题描述】：

我正在尝试创建一个表单，其中包含一个用于用户任务的输入字段和 3 个用于任务的小时、分钟和 AM/PM 的选择选项。我想创建一个按钮，在其下方添加相同的表单，以便用户可以输入具有相同字段的另一个任务。问题是，每当我在按钮上使用 jQuery append 函数时，表单的附加就会加倍。如何在用户单击按钮后只生成一次表单？下面是我的表单代码和 javascript：

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

Javascript

<script>
    jQuery("#addMore").click(function()
        var contents = jQuery("form").html();
        jQuery('form').append(contents);
    );
</script>

【参考方案1】：

你可以使用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();
);

【讨论】：

这种方法使得它只会生成另一个表单，之后不会生成另一个表单。我不认为那是我想要的。

非常感谢这个作品。但是每当我单击按钮时，页面都会刷新，并且所有内容都会被删除。我怎样才能让它只有一个被删除而其他的仍然存在？

@YashBob ：将其类型设置为按钮或添加event.preventDefault() .....检查更新的答案

这行得通，但现在的问题是整个表单已经变成了一个带有轮廓和东西的按钮。

@YashBob : 您可以根据需要使用 css 进行自定义...按钮也可以替换为图标。

【参考方案2】：

如果您想在每次单击按钮时添加相同的表单，那么您需要对您的 jQuery 代码进行少量更改

<script>
var contents = jQuery("form").html();
    jQuery("#addMore").click(function()

        jQuery('form').append(contents);
    );
</script>

【讨论】：

这工作得非常好！我想知道，我怎样才能添加一个删除按钮，该按钮实际上会删除用户添加的最后一个表单？

jQuery("form").last().remove();

联系我联系我nishit-manjarawala.com