我正在尝试创建一个允许用户输入他们的经验和学历的表格
我希望用户能够添加和删除教育或经验。
我能够做到这一点。唯一的问题是我正在创建的新div被附加到页面的末尾,而不是被附加到上一个div之后。
这些是我的脚本:
$(document).ready(function() {
var inputs = 1;
$('#btnAdd').click(function() {
$('.btnDel:disabled').removeAttr('disabled');
var c = $('.clonedInput:first').clone(true);
c.children(':text').attr('name', 'input' + (++inputs));
$('.clonedInput:last').after(c);
});
$('.btnDel').click(function() {
if (confirm('continue delete?')) {
--inputs;
$(this).closest('.clonedInput').remove();
$('.btnDel').attr('disabled', ($('.clonedInput').length < 2));
}
});
});
$(document).ready(function() {
var inputs = 1;
$('#btnAdd2').click(function() {
$('.btnDel2:disabled').removeAttr('disabled');
var c = $('.clonedInput:first').clone(true);
c.children(':text').attr('name', 'input' + (++inputs));
$('.clonedInput:last').after(c);
});
$('.btnDel2').click(function() {
--inputs;
$(this).closest('.clonedInput').remove();
$('.btnDel2').attr('disabled', ($('.clonedInput').length < 2));
});
});
我知道复制这样的代码是一种不好的形式,但是我不确定其他方式可以这样做,以免单击添加按钮时输入错误的div ...
和我的HTML是:
<form id="myForm">
<h2>Education</h2>
<p>Please add all of your education</p>
<div style="margin-bottom: 4px; border: 2px solid; border-style: dashed" class="clonedInput">
Level: <select>
<option value="secondary">Secondary</option>
<option value="someps">Some Post Secondary</option>
<option value="college">College</option>
</select> <br /> <br />
Did you receive a degree, diploma or certificate?<br />
<select>
<option value="certificate">Certificate</option>
<option>Diploma</option>
<option value="degree">Degree</option>
</select> <br />
<input type="button" class="btnDel" value="Remove Education" disabled="disabled" />
</div>
<div>
<input type="button" id="btnAdd2" value="add Education" />
</div>
<h2>Experience</h2>
<p>Please add all of your experience</p>
<div style="margin-bottom: 4px; class="clonedInput">
Position title: <input type="text"><br /> Years at position:
<input type="number"><br />
Responsibilities: <input type="text"><br />
<input type="text"><br />
Type: <select>
<option>Accounting, banking and Finance</option>
<option>Publishing & Journalism</option>
<option>Social Care & guidance work</option>
</select>
<input type="button" class="btnDel2" value="Remove Experience"
disabled="disabled" />
</div>
<div>
<input type="button" id="btnAdd2" value="add Experience" />
</div>
</form>
关于如何解决脚本的任何想法,以便当我单击“添加”按钮进行教育时,一个包含所有“教育”字段的新div显示在先前的教育框下方,并且与教育相同?
任何帮助,将不胜感激。谢谢!
最佳答案
首先,为什么会有2x $(document).ready
?将您的代码合并为一个。
重复的div出现在表格末尾的原因是,您的教育和经验div都具有class="clonedInput"
,因此$('.clonedInput:last').after(c)
导致重复的div放置在“体验”部分之后(碰巧是最后一个div与.clonedInput
选择器匹配)。
一种解决方案是为这些div集合中的每一个赋予它们自己的唯一类名,例如分别为eduInput
和expInput
。
因此,更正后的代码将是:
$('#btnAdd').click(function() {
$('.btnDel:disabled').removeAttr('disabled');
var c = $('.eduInput:first').clone(true);
c.children(':text').attr('name', 'input' + (++inputs));
$('.eduInput:last').after(c);
});
用于教育部门
为了清理代码,我建议将两个“添加”按钮绑定到同一个处理程序,但是通过检查目标参数并确定要复制的集(“教育”或“体验”)来对它们进行不同的操作。如:
// single handler and click event for both buttons
var clickHandler = function (e) {
// determine which btnAdd was clicked, such as e.getAttribute('id')
}
$('.btnAdd').click(clickHandler);
但是严重的是,您应该稍微清理一下代码。
关于javascript - 使用JQuery动态添加和删除div?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29198719/