Question

每次单击ADD按钮时，都有一个表单要克隆此表单。在这种情况下，表格附加了输入的先前值。我希望每个表单分开工作。有没有办法为输入添加空值？

这是我的代码：

$(document).ready(function() {
  $(".Add").click(function() {
    $(".formi").eq(0).clone().show().insertAfter(".formi:last");
    
  });
  $('.all').on('click', ".cancel", function() {
      $(this).closest('.formi').remove();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
  <form class="formi">
    <input type="text" placeholder="name" value="Sarah" />
    <select name="cars">
      <option value="one">one</option>
      <option value="two">two</option>
    </select>
    <button type="submit">ok</button>
    <span class="cancel">Cancel</span>
  </form>
</div>

Answer 1

是的，只需在克隆副本中清除它们（请参阅***行）：

＆＃13;

$(document).ready(function() {
  $(".Add").click(function() {
    $(".formi")
      .eq(0)
      .clone()
      .find("input").val("").end() // ***
      .show()
      .insertAfter(".formi:last");
    
  });
  $('.all').on('click', ".cancel", function() {
      $(this).closest('.formi').remove();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
  <form class="formi">
    <input type="text" placeholder="name" value="Sarah" />
    <select name="cars">
      <option value="one">one</option>
      <option value="two">two</option>
    </select>
    <button type="submit">ok</button>
    <span class="cancel">Cancel</span>
  </form>
</div>

＆＃13;

该具体示例使用find查找input，val清除其值，然后end返回原始克隆元素集，以便{ {1}}和show在该集合上运行（而不是输入）。

Answer 2

您应首先克隆form，然后重置元素值，如下所示。在您的情况下input。

$(document).ready(function() {
  $(".Add").click(function() {

    var form = $(".formi").eq(0).clone();
    form.find("input[type=text]").val("");
    form.show().insertAfter(".formi:last");


  });
  $('.all').on('click', ".cancel", function() {
    $(this).closest('.formi').remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
  <form class="formi">
    <input type="text" placeholder="name" value="Sarah" />
    <select name="cars">
      <option value="one">one</option>
      <option value="two">two</option>
    </select>
    <button type="submit">ok</button>
    <span class="cancel">Cancel</span>
  </form>
</div>

Answer 3

您可以选择克隆后的最后一个表格，然后清空子输入的值，如：

$(".formi:last input").val('');

$(document).ready(function() {
  $(".Add").click(function() {
    $(".formi").eq(0).clone().show().insertAfter(".formi:last");
    $(".formi:last input").val('');
  });
  $('.all').on('click', ".cancel", function() {
    $(this).closest('.formi').remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
  <form class="formi">
    <input type="text" placeholder="name" value="Sarah" />
    <select name="cars">
      <option value="one">one</option>
      <option value="two">two</option>
    </select>
    <button type="submit">ok</button>
    <span class="cancel">Cancel</span>
  </form>
</div>

Answer 4

我重构了你的一些东西，因为我必须采用不同的方式，以使其按照我想要的方式工作，但现在就是。

以下是JSFiddle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js">           </script>
  <span class="Add">Add+</span>
  <div class="all">
  <div class="formi">
  <input type="text" placeholder="name" value="Sarah" />
  <select name="cars">
    <option value="one">one</option>
    <option value="two">two</option>
  </select>
  <button class="add">ok</button>
  <span class="cancel">Cancel</span>
    </div>
</div>   



function addClickListener(){
    arr = $(".add")
    $(arr[arr.length - 1]).click(function(ev) {
      var clone = ev.currentTarget.parentElement.cloneNode(true);
      $('.all').append(clone);
      addClickListener();

    });
    cancArr = $('.cancel');
    $(cancArr[cancArr.length - 1])
    .on('click', function() {
        $(this).parent().remove();
      });
  }

  addClickListener();

带有空输入的jQuery克隆表单

4 个答案: