通過點擊一個按鈕創建一個div

Question

我想創建一個div，通過點擊一個按鈕至少包含一個表單。每個div（表格）都包含有關一架飛機的信息。當我點擊保存按鈕時，每個飛機都被保存在數據庫中。我已經開始意識到這種形式，但我不知道如何通過點擊按鈕來添加這些div。我試圖使用$(".div_avion").clone().appendTo("#div_flotte");，但它乘以div（不添加）。

這是我的代碼開頭：

<div id="flotte" class="tab-pane fade"> 
    <h3>Gestion de la flotte</h3><hr> 
    <form action="<?php echo $CurrentURL;?>" method="POST"> 
    <div class="panel panel-default"> 
     <div class="panel-body"> 
     <a class="btn btn-default btn-lg" href="http://<?php echo $_SERVER[HTTP_HOST];?>/administration/hubs/gerer"><i class="fa fa-arrow-left"></i> Retour</a> 
     <button type="submit" class="btn btn-success btn-lg" name="button" value="saveflotte"><i class="fa fa-floppy-o"></i> Enregistrer</button> 
     </div> 
    </div> 
    <button onclick="AddAvion()" class="btn btn-success" type="button"><i class="fa fa-plus"></i> Ajouter un appareil</button><hr> 
    <div id="div_flotte"> 
    <div class="div_avion" style="width:300px;float:left;position:relative;margin: 5px 5px 5px 5px;"> 
     <div class="panel panel-default"> 
       <div class="panel-heading"> 
       <div class="form-inline"> 
       <div class="input-group" style="width:200px"> 
        <span class="input-group-addon" id="basic-addon1">F-BEN</span> 
        <input type="text" name="avions[][immat]" class="form-control" placeholder="Ex : 49" > 
       </div> 
       <div class="input-group" style="float:right;"> 
        <button class="btn btn-danger" name="button"><i class="fa fa-trash"></i></button> 
       </div> 
       </div> 
       </div> 
      <div class="panel-body"> 
      <div class="form-group"> 
      <div class="input-group"> 
        <span class="input-group-addon" id="basic-addon1">Marque</span> 
        <input type="text" name="avions[][marque]" class="form-control" placeholder="Ex : Airbus" > 
       </div> 
      </div> 
      <div class="form-group"> 
       <div class="input-group"> 
       <span class="input-group-addon" id="basic-addon1">Modèle</span> 
       <input type="text" name="avions[][modele]" class="form-control" placeholder="Ex : 737" > 
       </div> 
      </div> 
      <div class="form-group"> 
      <div class="input-group"> 
        <span class="input-group-addon" id="basic-addon1">IATA</span> 
        <input type="text" name="avions[][iata]" class="form-control" placeholder="Ex : 738" > 
       </div> 
      </div> 
      <div class="form-group"> 
      <div class="input-group"> 
        <span class="input-group-addon" id="basic-addon1">Type de vol</span> 
        <select name="avions[][type]" class="form-control-inline"> 
        <?php 
         foreach ($types_vol_avion as $cle => $value) { 
          echo '<option value="'.$cle.'">'.$value.'</option>'; 
         } 
         ?> 
       </select> 
       </div> 
      </div> 
      <div class="form-group"> 
      <div class="input-group"> 
        <span class="input-group-addon" id="basic-addon1">Transport</span> 
        <select name="avions[][activite]" class="form-control-inline"> 
        <?php 
         foreach ($Activite_avion as $cle => $value) { 
          echo '<option value="'.$cle.'">'.$value.'</option>'; 
         } 
         ?> 
       </select> 
       </div> 
      </div> 
      </div> 
     </div> 
    </div> 
    </div> 
    </form> 
    <script> 
    function AddAvion() 
    { 
     $(".div_avion").clone().appendTo("#div_flotte"); 
    } 
    </script> 
</div> 

你有什麼想法？

Answer 1

可以使用.EQ功能並獲得唯一

類

$(".div_avion").eq(0).clone().appendTo("#div_flotte"); 

Answer 2

的第一個div在這裏，你可以選擇使用一個簡單的例子查詢http://jsfiddle.net/4dEsJ/1/

$(document).ready(function() { 
     $("button[name='addDom']").click(function() { 
      var domElement = $('<div class="module_holder"><div class="module_item"><img src="images/i-5.png" alt="Sweep Stakes" /></div></div>'); 
      $(this).after(domElement); 
     }); 
    }); 

Answer 3

呀$(".div_avion").clone().appendTo("#div_flotte");應該工作。問題是你選擇一個類與一個div（使用ID而不是B/C你保證只有一個獨特的實例）。其次，您選擇的div包含其中的其他子div（這就是爲什麼它倍增）。我希望這有幫助。