javascript - 在不显示模式下克隆一个 div

Question

单击时有一个 NEWFORM 按钮可以添加表单。单击 NEWFORM 按钮时如何显示表单。然后添加div。我写了下面的代码。但它不起作用:

$(document).ready(function() {
  $(".newform").click(function() {
    $(".MyForm")
    .eq(0)
    .clone()
    .show()
    .insertAfter(".MyForm:last");
  });

  $(document).on('click', '.MyForm button[type=submit]', function(e) {
    e.preventDefault() // To make sure the form is not submitted 
    var $frm = $(this).closest('.MyForm');
    console.log($frm.serialize());
    $.ajax(
        $frm.attr('action'), 
        {
          method: $frm.attr('method'),
          data: $frm.serialize()
        }
    );
  });
});

.all{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="newform">NEWFORM+</span>
<div class="all">
  <form class="MyForm" method="post">
    <input type="text" placeholder="name" value="Aynaz" name="a1" />
    <select name="Avg">
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <button type="submit">Submit</button>
  </form>
</div>

Answer 1

问题是你的CSS。您正在使整个包装器 div 不可见。因此，即使您调用 .show()，它也会隐藏其中的所有内容。

$(document).ready(function() {
  $(".newform").click(function() {
    $(".MyForm")
    .eq(0)
    .clone()
    .insertAfter(".MyForm:last")
    .show();
  });

  $(document).on('click', '.MyForm button[type=submit]', function(e) {
    e.preventDefault() // To make sure the form is not submitted 
    var $frm = $(this).closest('.MyForm');
    console.log($frm.serialize());
    $.ajax(
        $frm.attr('action'), 
        {
          method: $frm.attr('method'),
          data: $frm.serialize()
        }
    );
  });
});

.all{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="newform">NEWFORM+</span>
<div>
  <form class="MyForm all" method="post">
    <input type="text" placeholder="name" value="Aynaz" name="a1" />
    <select name="Avg">
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <button type="submit">Submit</button>
  </form>
</div>