javascript - jQuery、DOM 和 on() 方法

Question

我对 jQuery、DOM 和 on() 方法有疑问。这是我的分区:

<div class="box">
  <p class="addBox">Add Box</p>
  <p class="remBox">Remove Box</p>
  <textarea name="box[]"></textarea>
</div>

还有一个 jQuery 代码:

$(document).on("click", ".addBox", function(event){
  $(this).parent().append('<div class="box"><p class="addBox">Add Box</p><p class="remBox">Remove Box</p><textarea name="box[]"></textarea></div>').children(':last').hide().fadeIn(1000);
});

$(document).on("click", ".remBox", function(event){
  $(this).parent().hide(1000).delay(1000, empty());
});

我想要实现的是一个带有两个按钮的框，其中一个将制作该框的另一个副本，另一个将删除所选框。该框的两个副本在索引文件中“硬编码”，因此从一开始就在 DOM 中可用。

按钮完成了它们的基本用途，但 DOM 结构变得越来越疯狂。如果我在新创建的框上按“添加框”链接，新框将在我单击的框之后立即显示。但是，有时它会出现在列表的末尾。它与'del box'链接一样，有时它只删除一个框，有时我想要的那个和另外两三个。我做错了什么？谢谢!

Answer 1

您可能需要 .after()(或 .before())，但不需要 .append()。那，你的 .delay() 语法不正确。

$(document).on("click", ".addBox", function (event) {
    $(this).parent().after('<div class="box"><p class="addBox">Add Box</p><p class="remBox">Remove Box</p><textarea name="box[]"></textarea></div>').children(':last').hide().fadeIn(1000);
});
$(document).on("click", ".remBox", function (event) {
    $(this).parent().hide(1000).delay(1000).remove();
});

jsFiddle example