[英]Adding and removing input fields with jquery
我在使用jQuery添加输入字段时遇到问题。
我将限制设置为5个输入字段。 但是,如果我尝试删除输入字段,则我的限制无效。 我使用x--时,我的var x是不适当的减量,例如,如果我有5个输入字段,并且当我单击以删除一个输入时,var x是-4而不是-1。
有人可以帮我解决这个问题。 我的代码是:
$('document').ready(function() {
var max = 5;
var x = 0;
$('#add').click(function(e) {
if(x < max) {
$('#inp').append('<div><input class = "new_input" type=text name="name[]" placeholder="Unesite podatak"/><a class="remove_field "href="#"> X</a><div><br/>');
x++;
}
$('.remove_field').click( function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
});
问题是您要在添加处理程序中添加删除处理程序,而不是使用事件委托 。 因此,先前添加的remove元素将获得多个remove处理程序,从而导致x多次减小
jQuery(function ($) { var max = 5; var x = 0; $('#add').click(function (e) { if (x < max) { $('#inp').append('<div><input class = "new_input" type=text name="name[]" placeholder="Unesite podatak"/><a class="remove_field "href="#"> X</a><div><br/>'); x++; } }); $('#inp').on('click', '.remove_field', function (e) { e.preventDefault(); $(this).parent('div').remove(); x--; }) });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button id="add">Add</button> <div id="inp"></div>
问题: 演示
这是一个小例子,请参阅此链接
http://jsfiddle.net/vh3Js/
希望这会帮助你。
HTML:
<form id="myForm">
<div style="margin-bottom:4px;" class="clonedInput">
<input type="button" class="btnDel" value="Delete" disabled="disabled" />
<input type="text" name="input1" />
</div>
<div>
<input type="button" id="btnAdd" value="add another name" />
</div>
</form>
JS:
$(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));
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.