버튼을 클릭하여 동적으로 오브젝트를 생성하는 방법

Question

하나의 오브젝트로 간주되는 6 개의 사각형으로 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>

정확히 위의 예는 형태로 작동합니다. * *에 의해 무슨 뜻 이죠