ボタンをクリックして動的にオブジェクトを作成する方法

Question

6つの矩形（1つのオブジェクトと見なされます）の2行を作成しようとしています。

また、ユーザーがどちらかの端をクリックしたときに、新しい矩形のセットが元のものの上または下に表示されるように、プラスボタンを追加したいと考えています。

（彼らはをクリックされ、プラスボタンに応じて）だから私は、次のことを達成しようとしています：

私がこれまでに見つかった/しようとしている何

：

$(function() { 
 
    $(".repeat").on('click', function (e) { 
 
     e.preventDefault(); 
 
     var $self = $(this); 
 
     $self.before($self.prev('table').clone()); 
 
     //$self.remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="repeatable"> 
 
     <table border="1"> 
 
      <tr> 
 
       <td> 
 
        <input type="text" name="userInput[]" /> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
     <button class="repeat">Add Another</button> 
 
    </div> 
 
    <input type="submit" value="Submit" /> 
 
</form>

を

上記の例はフォームでのみ機能します。誰も私が望むもののためにこの仕事をする方法について知っていますか？

Answer 1

あなたのコードを上に追加するか、下に追加するように変更しました。

イベントリスナーを編集して、ボタンに特定のクラスがあるかどうかを確認しました。その場合は、上または下のいずれかを追加します。

$("body").on('click', ".repeat", function (e) { //other stuff here} 

また、それは「フォーム」に依存していなかったので、あなたのHTMLを変更し、あなたが要素を入れ替えることができ、新しいDOM要素が添付イベントリスナーを持っていないので、それはまた、「身体」をクリックしてリッスンクラスが残っている限りタイプします。

$(function() { 
 
    $("body").on('click', ".repeat", function (e) { 
 
     e.preventDefault(); 
 
     var $self = $(this); 
 
     var $parent = $self.parent(); 
 
     if($self.hasClass("add-bottom")){ 
 
      $parent.after($parent.clone()); 
 
     } else { 
 
      $parent.before($parent.clone()); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div class="container"> 
 
    <div class="repeatable"> 
 
     <button class="repeat add-top">Add above</button> 
 
     <table border="1"> 
 
      <tr> 
 
       <td> 
 
        <input type="text" name="userInput[]" /> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
     <button class="repeat add-bottom">Add below</button> 
 
    </div> 
 
    </div>