Question

在一个表单中，我有一个部分，我希望用户能够生成1到5个我正在调用 Block 的内容。使用jQuery，我可以毫无问题地添加和删除这些块。

但是，在每个块中，我希望能够生成1到5个我称为 Items 的内容。我无法一辈子工作。

当我单击“添加项目”链接时，似乎什么也没发生。

这是我的代码：

$(document).ready(function(e) {

  //variables
  var blockContent = '<div><p>This is a block</p><div class="item"><a href="#" id="addItem">Add Item</a></div><a href="#" id="removeBlock">Remove Block</a></div>';
  var blockRows = 1;
  var blockMaxRows = 5;

  var itemContent = '<div><p>This is an Item</p><a href="#" id="removeItem">Remove Item</a></div><hr/>';
  var itemRows = 1;
  var itemMaxRows = 5;

  //add a block
  $("#addBlock").click(function(e) {
    if (blockRows <= blockMaxRows) {
      $(".block").append(blockContent);
      blockRows++;
    }
  });

  //remove a block
  $(".block").on("click", "#removeBlock", function(e) {
    $(this).parent("div").remove();
    blockRows--;
  });

  //add an item
  $("#addItem").click(function(e) {
    if (itemRows <= itemMaxRows) {
      $(".item").append(itemContent);
      itemRows++;
    }
  });

  //remove an item
  $(".item").on("click", "#removeItem", function(e) {
    $(this).parent("div").remove();
    itemRows--;
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="block">
  <hr/>
  <a href="#" id="addBlock">Add Block</a>
  <hr/>
</div>

Answer 1

您应该将此脚本用于动态添加的html

  //add an item
  $(document).on('click', '.addItem', function(){ 

    if (itemRows <= itemMaxRows) {
      $(".item").append(itemContent);
      itemRows++;
    }
  });

我可以在以前的.append（）生成的内容中使用jQuery .append（）吗？

1 个答案: