javascript - 使用 jQuery 克隆表单输入

Question

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

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

<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>

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

在使用以下代码在单个表单上使用 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

使用事件委托(delegate)和遍历。按下按钮的事件委托(delegate)，以及查找相对于按钮的事物的遍历:

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

<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>

我应该说，如果您的代码运行时所有这些按钮都已经存在，则您不需要事件委托(delegate)。如果是这样，您可以这样做:

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

...但听起来事情相当动态，所以这就是我去委托(delegate)的原因。