克隆 JQuery 后添加额外的输入文本
[英]Adding additional input text after cloning JQuery
问题描述
I'm relatively new to Javascript/jQuery and I'm trying to clone a form to record scores.
我对 Javascript/jQuery 比较陌生，我正在尝试克隆一个表格来记录分数。 I can add as many input as I want to the pre-cloned form but I can't add, nor remove, any additional text inputs in the subsequent cloned forms.我可以在预克隆表单中添加任意数量的输入，但无法在后续克隆的 forms 中添加或删除任何其他文本输入。
Let's say before I add a pre-requisite, I placed in 5 input boxes.假设在我添加一个先决条件之前，我放入了 5 个输入框。 In that first form, I can remove and add as many input boxes as I want.在第一种形式中，我可以根据需要删除和添加任意数量的输入框。
Now let's say I add a prequisite, it will clone the first form, but in the cloned form I cannot add nor remove any of the input boxes.现在假设我添加了一个先决条件，它将克隆第一个表单，但在克隆的表单中，我无法添加或删除任何输入框。 That is my issue.那是我的问题。
At this point I am stumped on how to fix this.在这一点上，我很难解决如何解决这个问题。
$(document).ready(function() { var max_fields = 10; var wrapper = $(".form-input"); var add_button = $(".add_item"); var x = 1; $(add_button).click(function(e) { e.preventDefault(); if (x < max_fields) { //max input box allowed x++; //text box increment $(wrapper).append('<div><input type="text" name="items[]"/><a href="#" class="remove_field">X</a></div>'); //add input box } }); $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text e.preventDefault(); $(this).parent('div').remove(); x--; }) }); //Write code to clone form here, but set everything to default and add //a button to remove any prerequisites. $(document).ready(function() { var ctr = 1; $(".add_req").click(function() { $(".myForm").eq(0).clone().find("input").val("").end().show().insertAfter(".myForm:last"); }); $('.all').on('click', ".remove-req", function() { $(this).closest('.myForm').remove(); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <head> <meta charset=utf-8 /> <title>JS Bin</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="all"> <button class="add_req">Add Preq-Requisite</button> <form class="myForm"> <section class="selection-menus"> <select name="major" class="major"> <option selected="selected">SELECT MAJOR</option> <option value="CS">Computer Science</option> <option value="CIS">Computer Information Systems</option> </select> <select name="course-no" class="course-no"> <option value="CS_000">SELECT COURSE</option> <option value="CS_140">140</option> <option value="CS_210">210</option> <option value="CS_220">220</option> <,--THERE IS NO CIS DATA, THIS IS JUST FOR FUNCTIONALITY--> <option value="CIS_000">SELECT COURSE</option> <option value="CIS_315">315</option> <option value="CIS_330">330</option> <option value="CIS_497">497</option> </select> <button class="add_item">Add Item</button> </section> <div class="form-input"> <div><input type="text" name="items[]"></div> </div> <span class="remove-req">Remove Req</span> </form> </div> </body>
2 个解决方案
解决方案1
1 2021-03-29 21:48:16
You can not use:你不能使用：
var wrapper = $(".form-input");
var add_button = $(".add_item");
As when you add new form those selectors wont work anymore, and your added add button did not have any events on them.当您添加新表单时，这些选择器将不再起作用，并且您添加的添加按钮上没有任何事件。
Instead use:而是使用：
$(document).on("click", ".add_item", function(e) {
If you target document on something that something can be dynamically added and targeted.如果您将文档定位在可以动态添加和定位的内容上。 and later:然后：
$(e.target).parents(".myForm").find(".form-input")
target click target and search for appropriate element to append to.目标单击目标并搜索适当的元素到 append 到。
$(document).ready(function() { var max_fields = 10; var x = 1; $(document).on("click", ".add_item", function(e) { e.preventDefault(); if (x < max_fields) { //max input box allowed x++; //text box increment $(e.target).parents(".myForm").find(".form-input").append('<div><input type="text" name="items[]"/><a href="#" class="remove_field">X</a></div>'); //add input box } }); $(".form-input").on("click", ".remove_field", function(e) { //user click on remove text e.preventDefault(); $(this).parent('div').remove(); x--; }) }); //Write code to clone form here, but set everything to default and add //a button to remove any prerequisites. $(document).ready(function() { var ctr = 1; $(".add_req").click(function() { $(".myForm").eq(0).clone().find("input").val("").end().show().insertAfter(".myForm:last"); }); $('.all').on('click', ".remove-req", function() { $(this).closest('.myForm').remove(); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <head> <meta charset=utf-8 /> <title>JS Bin</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="all"> <button class="add_req">Add Preq-Requisite</button> <form class="myForm"> <section class="selection-menus"> <select name="major" class="major"> <option selected="selected">SELECT MAJOR</option> <option value="CS">Computer Science</option> <option value="CIS">Computer Information Systems</option> </select> <select name="course-no" class="course-no"> <option value="CS_000">SELECT COURSE</option> <option value="CS_140">140</option> <option value="CS_210">210</option> <option value="CS_220">220</option> <,--THERE IS NO CIS DATA, THIS IS JUST FOR FUNCTIONALITY--> <option value="CIS_000">SELECT COURSE</option> <option value="CIS_315">315</option> <option value="CIS_330">330</option> <option value="CIS_497">497</option> </select> <button class="add_item">Add Item</button> </section> <div class="form-input"> <div><input type="text" name="items[]"></div> </div> <span class="remove-req">Remove Req</span> </form> </div> </body>
解决方案2
1 已采纳 2021-03-29 21:56:49
It has to do with the way you select your wrapper element.它与您 select 您的wrapper元素的方式有关。
When the page loads you get the wrapper element with $(".form-input");当页面加载时，您将获得带有$(".form-input");的wrapper元素； . . This means you have now selected the elements with the .form-input class that are currently on the page.这意味着您现在已经选择了当前页面上带有.form-input class 的元素。 This works fine.这工作正常。
However, from here you clone your form and create a second element with the .form-input , that comes from the original form.但是，从这里您克隆您的表单并使用来自原始表单的.form-input创建第二个元素。 But the difference here is that the wrapper variable never found this second .form-input because it didn't exist yet.但这里的不同之处在于， wrapper变量从未找到第二个.form-input ，因为它还不存在。 Same will count for all consequent .form-input elements.所有后续.form-input元素也一样。
A fix for this is to change the event listener for .remove_field .解决此问题的方法是更改.remove_field的事件侦听器。 Instead of listening to only the first wrapper , listen on the document for the click .不是只听第一个wrapper ，而是听document的click 。 All clicks eventually bubble to the document, unless they're intercepted and stopped.所有点击最终都会冒泡到文档，除非它们被拦截并停止。
$(document).ready(function() { var max_fields = 10; var wrapper = $(".form-input"); var add_button = $(".add_item"); var x = 1; $(document).on('click', '.add_item', function(e) { e.preventDefault(); var $this = $(this); var $formInput = $this.parent().next(); if (x < max_fields) { //max input box allowed x++; //text box increment $formInput.append('<div><input type="text" name="items[]"/><a href="#" class="remove_field">X</a></div>'); //add input box } }); $(document).on("click", ".remove_field", function(e) { //user click on remove text e.preventDefault(); $(this).parent('div').remove(); x--; }) }); //Write code to clone form here, but set everything to default and add //a button to remove any prerequisites. $(document).ready(function() { var ctr = 1; $(".add_req").click(function() { $(".myForm").eq(0).clone().find("input").val("").end().show().insertAfter(".myForm:last"); }); $('.all').on('click', ".remove-req", function() { $(this).closest('.myForm').remove(); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <head> <meta charset=utf-8 /> <title>JS Bin</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="all"> <button class="add_req">Add Preq-Requisite</button> <form class="myForm"> <section class="selection-menus"> <select name="major" class="major"> <option selected="selected">SELECT MAJOR</option> <option value="CS">Computer Science</option> <option value="CIS">Computer Information Systems</option> </select> <select name="course-no" class="course-no"> <option value="CS_000">SELECT COURSE</option> <option value="CS_140">140</option> <option value="CS_210">210</option> <option value="CS_220">220</option> <,--THERE IS NO CIS DATA, THIS IS JUST FOR FUNCTIONALITY--> <option value="CIS_000">SELECT COURSE</option> <option value="CIS_315">315</option> <option value="CIS_330">330</option> <option value="CIS_497">497</option> </select> <button class="add_item">Add Item</button> </section> <div class="form-input"> <div><input type="text" name="items[]"></div> </div> <span class="remove-req">Remove Req</span> </form> </div> </body>
I would recommend that you didn't clone the entire <form> element, as I can imagine that all data has to be sent as a whole.我建议您不要克隆整个<form>元素，因为我可以想象所有数据都必须作为一个整体发送。 But each <form> element is its own entity and won't work together with other forms.但是每个<form>元素都是它自己的实体，不会与其他 forms 一起使用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.