dyanamicly 생성 된 요소에 추가 - Jquery

Question

동적으로 생성 된 행의 행에 html 드롭 다운을 추가하려고합니다.

<div class="row row-room cf"> 
<span class="roomNo">Room <span>1</span></span> 
<div class="inputsection adult"> 
    <i class="small-icon-person"></i> 
    <div class="inputbox"> 
     <div class="custom-select-v3"> 
      <select> 
       <option>1</option> 
       <option>2</option> 
       <option>3</option> 
       <option>4</option> 
      </select> 
      <span></span> 
     </div> 
    </div> 
</div> 
<div class="inputsection child"> 
    <i class="small-icon-person-small"></i> 
    <div class="inputbox"> 
     <div class="custom-select-v3"> 
      <select class="hotel-child-dropDown"> 
       <option>0</option> 
       <option>1</option> 
       <option>2</option> 
       <option>3</option> 
       <option>4</option> 
       <option>5</option> 
      </select> 
      <span></span> 
     </div> 
    </div> 
</div> 


<div class="specify-wrap">                
    <!--Here i want to add some dropdowns --> 
</div> 


<i class="small-icon-x-red">remove room</i> 
</div> 

나는 6 이하의 시간이 전체 구조를 복제 것이며, 내가 호텔 - 아이 드롭 다운을 변경하면 내가 변경하면, <div class="specify-wrap">에 여기에 직면 어떤 메신저 문제를 좀 더 드롭 다운을 추가 할 모든 <div class="specify-wrap">의 드롭 다운은 모든 복제 된 요소에서 동일한 드롭 다운으로 생성됩니다.

내 코드 :

$('.hotel-child-dropDown').each(function(){ 
    $(this).change(function(){ 
     var el = $(this).parents('.row').find('.specify-wrap'); 
     var val = $(this).val(); 
     el.empty(); 
     var html = 
        '<div class="inputsection">'+ 
        ' <div class="inputbox childMargin">'+ 
        ' <div class="custom-select-v3">'+ 
        '  <select>'+ 
        '   <option>0</option>'+ 
        '   <option>1</option>'+ 
        '   <option>2</option>'+ 
        '   <option>3</option>'+ 
        '   <option>4</option>'+ 
        '  </select>'+ 
        '  <span></span>'+ 
        ' </div>'+ 
        ' </div>'+ 
        '</div>'; 

     for(var i=0; i<val; i++) 
     { 
      el.append(html); 
     } 
     console.log(val); 
    }); 
}); 

바이올린 링크 :enter link description here 이 상황을 극복 할 수있는 더 나은 솔루션이 있습니까? 당신이 DIV 사용 clone(true)를 복제하는 동안 다음

Answer 1

은 Fiddle

업데이트됩니다. 이

$("#add").on("click",function(){ 
    var rowDiv = $(".row:first").clone(true); 
    rowDiv.insertBefore("#add"); 
}); 

대신 .each()를 사용하는 것처럼, 직접 요소에 change 이벤트를 연결합니다. 이

$(".hotel-child-dropDown").on("change",function(){ 
    var el = $(this).parents('.row').find('.specify-wrap'); 
    var val = $(this).val(); 
    el.empty(); 
    var html = 
       '<div class="inputsection">'+ 
       ' <div class="inputbox childMargin">'+ 
       ' <div class="custom-select-v3">'+ 
       '  <select>'+ 
       '   <option>0</option>'+ 
       '   <option>1</option>'+ 
       '   <option>2</option>'+ 
       '   <option>3</option>'+ 
       '   <option>4</option>'+ 
       '  </select>'+ 
       '  <span></span>'+ 
       ' </div>'+ 
       ' </div>'+ 
       '</div>'; 

    for(var i=0; i<val; i++) 
    { 
     el.append(html); 
    } 
    console.log(val); 
});