jQuery：點擊工作時克隆輸入字段，但不能更改選擇框值

Question

當您點擊「添加電話」按鈕時，我想添加一個由輸入字段和選擇框組成的新行。我面臨的問題是，當我克隆這些元素時，它們似乎克隆得很好，但是，選擇框似乎不起作用。我無法將其更改爲不同的值。另外，如果填寫值，在單擊「添加」按鈕之前，新添加的字段將包含相同的值。另一個問題是，如果我有兩組字段，當我點擊「添加電話」按鈕時，它將關閉兩個字段，並追加兩個字段。

因此，這裏是我的問題：
1）我怎樣才能獲得克隆的選擇框工作
2）怎樣才能確保克隆的字段爲空
3）我如何可以克隆僅有1處一次

我將不勝感激的幫助。

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

1. 發生問題是因爲jQuery Mobile的包裝<select>額外的HTML標籤和添加事件偵聽器給他們。關鍵是要與原來的<select>更換包裝HTML和追加到頁面後，觸發其初始化：

   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> S IN克隆值

3. 它可以使用:first實現：

   $('.phone-info:first') 
   

或與原始的HTML：

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

由於使用具有相同ID的多個元素的強烈反對，我將它們改爲類。

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

如果somewhy想留在原來的HTML，這裏是​​固定JS和原始的HTML。

更新。感謝@Omar指出<input>和.enhanceWithin()的錯誤。