如何在 jQuery 中點擊一個元素 append

Question

單擊添加后自動刪除 div 元素。 它在添加或附加到表單標簽內后刪除元素。

 $('.add').on('click', function() { $('#testAdd').append('<div class="form-group add-input"> <input type="text" placeholder="add someting..."> <button class="add">+</button> </div>'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="testAdd" action="" method="POST"> <div class="form-group add-input"> <input type="text" placeholder="add someting..."> <button class="add">+</button> </div> </form>

Answer 1

單擊+按鈕后， <div>元素將按預期附加到表單。 但是隨后表單被提交到服務器。 當頁面重新加載時，頁面的 html 會再次呈現，因此附加的<div>元素會消失。

您可以像這樣更改按鈕的類型

 <button type="button" class="add">+</button>

並添加另一個用於提交表單的按鈕。

Answer 2

將type="button"添加到現有的按鈕標簽，效果很好，點擊它時不提交。

 $('.add').on('click', function() { $('#testAdd').append('<div class="form-group add-input"> <input type="text" placeholder="add someting..."> <button type="button" class="add">+</button> </div>'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="testAdd" action="" method="POST"> <div class="form-group add-input"> <input type="text" placeholder="add someting..."> <button type="button" class="add">+</button> </div> </form>