用jQuery克隆表单输入 [英] Cloning form inputs with jQuery

问题描述

我的很多类似的问题，但没有一个解决具体问题，不幸的是。

我在页面上有多个所有结构都一样：

 < form> 
< div class =form-group> 
< select>< / select> 
< / div> 
< div class =blank-container> 
< div class =form-group blank-group> 
< select>< / select> 
< / div> 
< / div> 
< button type =buttonclass =add-blank>< / button> 
< button type =submit>< / button> 
< / form> 
  

最初的 .form-group form 有一个预填充的选择，但选择在 .blank-group 内是空的。当按下 .add-blank 按钮时，我希望 clone（）上一个 .blank-group 并附加到 .blank-container 。

I在使用 id s在单个表单上使用以下代码管理此操作：

  $（＃add-blank）。click（function（）{
 $（。blank-group）。last（）。clone（）。appendTo（＃blank-container ）; 
}）; 
  

但是现在我在同一页上有很多形式，结构相同，我需要使用特定 .blank-container ，我遇到了麻烦。这是我试过的：

  $（。add-blank）。click（function（）{$ b $ （）。blankGroup = $（this）.closest（form）。find（。blank-container）。find（。blank-group）。last（）; 
 blankContainer = $（this）。最接近（form）。find（。blank-container）; 
 blankGroup.clone（）。appendTo（blankContainer）; 
}）; 
  

解决方案

使用事件委托和遍历。按钮按下的事件委派，并遍历来查找相对于的按钮：

  $（ （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），但通常有一个元素更接近您想要捕捉的东西活动。

直播示例：

 <$ （click，.add-blank，function（）{var form = $（this）.closest（'form'）; form.find（）。c $ c> $（＃container）。 （）。blank（）。）。last（）。clone（）。appendTo（form.find（。blank-container））;}）;  

 < div id =container> <形式> < div class =form-group> <选择>< /选择> < / DIV> < div class =blank-container> < div class =form-group blank-group>这是空白组< select>< / select> < / DIV> < / DIV> < button type =buttonclass =add-blank>添加< / button> <按钮类型=提交>< /按钮> < / form>< / div>< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>  

如果所有这些都不需要事件委托代码运行时按钮已经存在。如果是这样的话，你可以这样做：

  $（。add-blank）。click（function（）{ 
 var form = $（this）.closest（'form'）; 
 form.find（。blank-group）。last（）。clone（）。appendTo（form.find（ .blank-container））; 
}）; 
  

...但听起来事情是非常动态的，所以这就是我去参加代表团的原因。 / p>

There are numerous similar questions to mine, but none that address the specifics, unfortunately.

I have multiple forms on a page, all with the same structure:

<form>
    <div class="form-group">
        <select></select>
    </div>
    <div class="blank-container">
        <div class="form-group blank-group">
            <select></select>
        </div>
    </div>
    <button type="button" class="add-blank"></button>
    <button type="submit"></button>
</form>

The initial .form-group within each form has a pre-populated select, but the select within .blank-group is empty. When the .add-blank button is pressed, I want to clone() the last .blank-group and append it to the .blank-container.

I've managed this before using ids on a single form with the following code:

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

But now I have numerous forms on the same page with the same structure, I need to work with a specific .blank-container and I'm having troubles. This is what I have tried:

$(".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);
});

解决方案

Use event delegation and traversal. Event delegation for the button press, and traversal to find things relative to the button:

$("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") could be $(document), but usually there's an element that's a bit closer to the things you want to capture the event on.

Live Example:

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

<div id="container">
  <form>
    <div class="form-group">
      <select></select>
    </div>
    <div class="blank-container">
      <div class="form-group blank-group">
        This is the "blank" group
        <select></select>
      </div>
    </div>
    <button type="button" class="add-blank">Add</button>
    <button type="submit"></button>
  </form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

I should say you don't need event delegation if all of those buttons will already exist when your code runs. If that's the case, you could do this:

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

...but it sounded like things were fairly dynamic, so that's why I went for delegation.

这篇关于用jQuery克隆表单输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！