表示なしモードの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>