使用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--;
});
});
});
答案 0 :(得分:1)
问题是您是在添加处理程序中添加删除处理程序而不是使用event delegation。因此,之前添加的删除元素将获得多个删除处理程序,导致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--;
})
});
&#13;
<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>
&#13;
问题:Demo
答案 1 :(得分:0)
这是一个小例子, 看到这个链接
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));
}
});
});