追加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 有没有更好的解决办法来克服这种情况？

Answer 1

这里更新Fiddle

，而你是克隆的div使用clone(true)。这样

$("#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); 
});