javascript - 通过将 css id 和 class 传递给 jquery 方法动态创建 div

Question

我有一个div，需要在单击按钮时重复(动态创建)。我有一个工作代码，但它需要在页面上的很多地方使用，所以我想将其设为通用的，就像我需要的那样仅将特定的 div id 作为输入参数传递给该方法。

function textbox_add(id){
  console.log(id)
  var counter = 0;
  $('#'+id).on('click','.newField', function () {
    console.log(counter);
    if(counter >= 3){
      alert("Reached Maximum");
      return false
    }
    var newthing=$('div.addNew:first').clone().find('.newField').removeClass('newField').addClass('remove').val('Remove Field!').end();
    $('#'+id).append(newthing);
    counter++;
  });
  $('#'+id).on('click','.remove', function () {
    if (counter == 0)
    {
      return false
    }
    $(this).parent().remove();
    counter--;

});
}

如果我在方法之外使用它，它会完美地工作。目标是动态创建 4 个文本框，如果我删除它，它应该一一删除。

这是我的 fiddle Demo

当我放置在方法内部时面临的问题是:

1. 第一次点击时，它会创建单个 div，第二次点击时，它会创建两个 div，然后继续进一步点击。
2. 单击“删除”后，它的工作方式与“创建”类似。
3. 当我再次单击“新建”时，它会创建所有已删除、创建(之前)的 div 的总数。

我找不到丢失的地方。

Answer 1

我不太确定你想用你添加的id(我假设它是你的div id)做什么，但你可以尝试用元素计数替换你的计数器:

function textbox_add(id){
  $('#'+id).on('click','.newField', function () {
    if($("#" + id + " > .addNew").length >= 4){
      alert("Reached Maximum");
      return false
    }
    var newthing=$('div.addNew:first').clone().find('.newField').removeClass('newField').addClass('remove').val('Remove Field!').end();
    $('#'+id).append(newthing);
  });
  $('#'+id).on('click','.remove', function () {
    if ($("#" + id + " > .addNew").length == 1)
    {
      return false
    }
    $(this).parent().remove();
});
}
textbox_add('test');

working Fiddle

OP 基本上想要在添加按钮上有一个 onclick(html)，例如:

function textbox_add(id) {
if ($("#" + id + " > .addNew").length >= 4) {
    alert("Reached Maximum");
    return false;
}
var newthing = $('#'+id+' .addNew:first').clone().find('.newField').removeClass('newField').addClass('remove').val('Remove Field!').attr('onclick','').end();
$('#' + id).append(newthing);
$("#" + id + " > .addNew").on('click', '.remove', function () {
    if ($("#" + id + " > .addNew").length === 1) {
        return false;
    }
    $(this).parent().remove();
});

} working codePen