追加限制5次只有jquery .append

Question

我已经在这里看到类似的问题与答案，但没有什么可以解决我的问题。所以我在这里再问一次。

与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); 
     } 
     }); 

Answer 1

这样的事情？

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); 
}); 

Answer 2

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++; 
    } 
}); 

Answer 3

好来管理这只是删除附加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. 
} 
});