我在这里看到了类似的问题和答案,但没有什么能解决我的问题。所以我再次在这里问。
使用jquery我希望用户只添加五次输入字段,我使用的是.append,它工作正常,但添加了无限次。
$("#add-cert").click(function(){
var $addinput = $("<div class='row'><div class='small-6 columns'><label class='right inline'>Enter Your Certificate</label></div><div class='small-6 columns'><input type='text'></div></div>");
$("i").append($addinput);
});
请提供修复,我是jquery的新手。我也尝试过使用代码但是使用此代码.append停止工作:
$("#add-cert").click(function(){
var $addinput = $("<div class='row'><div class='small-6 columns'><label class='right inline'>Enter Your Certificate</label></div><div class='small-6 columns'><input type='text' name='manual-cert'></div></div>");
var num = $("input[name='manual-cert']").length;
if(num > 5){
$("i").append($addinput);
}
});
答案 0 :(得分:5)
这样的东西?
var maxAppend = 0;
$("#add-cert").click(function(){
if (maxAppend >= 5) return;
var addinput = $(
"<div class='row'><div class='small-6 columns'>"+
"<label class='right inline'>Enter Your Certificate</label></div>"+
"<div class='small-6 columns'><input type='text'></div></div>");
maxAppend++;
$("i").append(addinput);
});
答案 1 :(得分:1)
管理这个的新想法只是在追加5个元素后删除点击处理程序。
var count = 1;
$("#add-cert").click(function(){
if(count < 5) {
var $addinput = $("<div class='row'><div class='small-6 columns'><label class='right inline'>Enter Your Certificate</label></div><div class='small-6 columns'><input type='text'></div></div>");
$("i").append($addinput);
count++;
}
else{
$("#add-cert").off("click"); //remove click listener.
}
});
答案 2 :(得分:0)
var count = 0;
$("#add-cert").click(function(){
if(count < 5) {
var $addinput = $("<div class='row'><div class='small-6 columns'><label class='right inline'>Enter Your Certificate</label></div><div class='small-6 columns'><input type='text'></div></div>");
$("i").append($addinput);
count++;
}
});