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-group中的初始form都有预先填充的select，但select中的.blank-group为空。按下.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)，但通常会有一个元素更接近您要捕获事件的内容。

直播示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

......但听起来事情是相当有活力的，这就是我去代表团的原因。

使用jQuery克隆表单输入

1 个答案: