使用jQuery克隆表单输入

我有许多类似的问题，但遗憾的是，没有一个问题可以解决这些问题。

我在页面上有多个表单，所有表单都具有相同的结构：

每个form的初始.form-group都有一个预先填充的select ，但.blank-group的select是空的。 当按下.add-blank按钮时，我想clone()最后一个.blank-group并将其附加到.blank-container 。

我在使用以下代码在单个表单上使用id之前已经设置了这个：

 $("#add-blank").click(function() { $(".blank-group").last().clone().appendTo("#blank-container"); }); 

但是现在我在同一页面上有许多具有相同结构的表单，我需要使用特定的.blank-container而且我遇到了麻烦。 这是我尝试过的：

 $(".add-blank").click(function() { blankGroup = $(this).closest("form").find(".blank-container").find(".blank-group").last(); blankContainer = $(this).closest("form").find(".blank-container"); blankGroup.clone().appendTo(blankContainer); }); 

Answer 1

使用事件委派和遍历。 按下按钮的事件委托，并遍历以查找与按钮相关的内容：

 $("selector-for-the-overall-container").on("click", ".add-blank", function() { var form = $(this).closest('form'); form.find(".blank-group").last().clone().appendTo(form.find(".blank-container")); }); 

$("selector-for-the-overall-container") 可能是$(document) ，但通常有一个元素更接近你想要捕获事件的东西。

实例 ：

 $("#container").on("click", ".add-blank", function() { var form = $(this).closest('form'); form.find(".blank-group").last().clone().appendTo(form.find(".blank-container")); }); 

 
 
 
  
 
 
 This is the "blank" group  
 
 Add