javascript - 仅追加限制 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

那么管理这个的一个新想法就是在添加 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. 
 }
});

Answer 3

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