jQuery : 클릭 작업시 입력 필드를 복제하지만 선택 상자 값을 변경할 수 없습니다.

Question

"전화 추가"버튼을 클릭하면 입력 필드와 선택 상자로 구성된 새 행을 추가하고 싶습니다. 내가 직면하고있는 문제는, 내가 요소들을 복제 할 때, 그것들은 잘 복제되는 것처럼 보이지만, 선택 박스는 작동하지 않는 것처럼 보인다. 다른 값으로 변경할 수는 없습니다. 또한 값이 채워지면 "추가"버튼을 클릭하기 전에 새로 추가 된 필드에 동일한 값이 포함됩니다. 또 다른 문제는 두 세트의 필드가있는 경우 "전화 추가"버튼을 클릭하면 둘 다 닫히고 둘 다 추가된다는 것입니다.

그래서 여기 내 질문이 있습니다 :
1) 나는 복제 된 선택 상자 내가 복제 필드
3) 어떻게에서 단지 1을 복제 할 수 있습니다 비어 있는지 확인 할 수 있습니다 방법)
2를 작동시킬 수있는 방법 한 번

나는 크게 도움을 주시면 감사하겠습니다.

HTML

<button id="add-phone-button">Add Phone</button> 
<div class="phone-details"> 
    <div id="phone-number" class="col-xs-8"> 
     <label for="phone" class="invisible">Phone</label> 
     <input type="text" id="phone" class="phone" placeholder="Phone"/> 
    </div> 
    <div id="phone-type" class="col-xs-4"> 
     <label for="usage" class="invisible">Usage</label> 
     <select id="usage" /> 
      <option selected="selected">Option 1</option> 
      <option>Option 2</option> 
      <option>Option 3</option> 
     </select> 
    </div> 
</div> 

jQuery를

$('#add-phone-button').click(function() { 
    $('.phone-details #phone-number, .phone-details #phone-type').clone().appendTo('.phone-details:last-child'); 
}); 

DEMOhttp://jsfiddle.net/abLun3fp/1/

Answer 1

jQuery를 모바일 추가 HTML 태그 <select>을 감싸고 이벤트 리스너를 추가하기 때문에

1. 문제가 발생합니다 그들에게.

   clone.find('input[type="text"]').val(''); 
   

: 그 페이지에 추가하기 전에

clone.find('.ui-select').html(function() { return $(this).find('select')[0].outerHTML }); 
clone.appendTo('.phone-details'); 
clone.find('select').parent().enhanceWithin(); 

2. 당신은 클론의 모든 <input>의 값을 비울 수 : 비결은 원래 <select>로 포장 HTML을 대체 페이지로 추가 이후에 초기화를 실행하는 것입니다

3. 이 :first을 사용하여 달성 될 수

   $('.phone-info:first') 
   

또는 원래 HTML과는 :

같은 ID로 여러 요소를 사용하는 것은 권장하지 않기 때문에

 $('.phone-details #phone-number:first, .phone-details #phone-type:first') 

, I 클래스로 변경되었습니다.

Fiddle

HTML :

<button id="add-phone-button">Add Phone</button> 
<div class="phone-details"> 
    <div class="phone-info"> 
     <div class="phone-number col-xs-8"> 
      <label for="phone" class="invisible">Phone</label> 
      <input type="text" name="phone" class="phone" placeholder="Phone"/> 
     </div> 
     <div class="phone-type col-xs-4"> 
      <label for="usage" class="invisible">Usage</label> 
      <select name="usage"> 
       <option selected="selected">Option 1</option> 
       <option>Option 2</option> 
       <option>Option 3</option> 
      </select> 
     </div> 
    </div> 
</div> 

JS :

$('#add-phone-button').click(function() 
{ 
    var clone = $('.phone-info:first').clone(); 
    clone.find('.ui-select').html(function() { return $(this).find('select')[0].outerHTML }); 
    clone.find('input[type="text"]').val(''); 
    clone.appendTo('.phone-details'); 
    clone.find('select').parent().enhanceWithin(); 
}); 

당신이 당신의 원래 HTML과 함께 있고 싶어 somewhy 경우, 여기에 고정 JS 원래 HTML과 fiddle입니다.

업데이트. <input> 및 .enhanceWithin()에 대한 오류를 지적하기 위해 @Omar에게 감사드립니다.