如何解决克隆 JQuery
我对 Javascript/jQuery 比较陌生，我正在尝试克隆一个表单来记录分数。我可以向预克隆表单添加任意数量的输入，但无法在后续克隆表单中添加或删除任何其他文本输入。
假设在添加先决条件之前，我放置了 5 个输入框。在第一种形式中，我可以根据需要删除和添加任意数量的输入框。
现在假设我添加了一个先决条件，它将克隆第一个表单，但在克隆的表单中，我无法添加或删除任何输入框。那是我的问题。
此时我对如何解决这个问题感到困惑。
$(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>解决方法
您不能使用：
var wrapper = $(".form-input");
var add_button = $(".add_item");
当您添加新表单时，这些选择器将不再起作用，并且您添加的添加按钮上没有任何事件。
而是使用：
$(document).on("click",".add_item",function(e) {
如果您将文档定位在可以动态添加和定位的内容上。 之后：
$(e.target).parents(".myForm").find(".form-input")
target 单击 target 并搜索要附加到的适当元素。
$(document).ready(function() {
var max_fields = 10;
var x = 1;
$(document).on("click",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>这与您选择 wrapper 元素的方式有关。
当页面加载时，您会获得带有 wrapper 的 $(".form-input"); 元素。这意味着您现在已经选择了当前页面上具有 .form-input 类的元素。这工作正常。
但是，从这里您可以克隆您的表单并使用来自原始表单的 .form-input 创建第二个元素。但这里的区别在于 wrapper 变量从未找到第二个 .form-input，因为它还不存在。同样将适用于所有后续 .form-input 元素。
对此的解决方法是更改 .remove_field 的事件侦听器。不是只听第一个 wrapper，而是听 document 的 click。所有点击最终都会冒泡到文档中，除非它们被拦截并停止。
$(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",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>我建议您不要克隆整个 <form> 元素，因为我可以想象所有数据都必须作为一个整体发送。但是每个 <form> 元素都是它自己的实体，不能与其他形式一起使用。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。