仅追加限制5次jquery .append
仅追加限制5次jquery .append
提问于 2013-09-05 20:41:35
我在这里看到过类似的问题和答案，但没有什么能解决我的问题。所以我再问一遍。
对于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);
}
});回答 3
Stack Overflow用户
回答已采纳
发布于 2013-09-05 20:44:44
像这样的东西？
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);
});Stack Overflow用户
发布于 2013-09-05 20:50:29
好的，一个新的想法是在添加5个元素后删除click处理程序。
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.
}
});Stack Overflow用户
发布于 2013-09-05 20:45:40
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++;
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18636641
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号