jQuery：克隆点击工作中的输入字段，但无法更改选择框值

当您单击“添加电话”按钮时，我想添加一个由输入字段和选择框组成的新行。 我面临的问题是，当我克隆元素时，它们似乎克隆得很好，但是，选择框似乎不起作用。 我无法将其更改为其他值。 此外，如果填写了值，则在单击“添加”按钮之前，新添加的字段将包含相同的值。 另一个问题是，如果我有两组字段，当我单击“添加电话”按钮时，它将关闭两个字段，并附加两个字段。

所以这是我的问题：
1）如何让克隆的选择框工作
2）如何确保克隆的字段为空
3）我怎样才能一次只克隆1个

我非常感谢你的帮助。

HTML

Add Phone 
 
 Phone  
 
 Usage  Option 1 Option 2 Option 3  
  

jQuery的

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

演示 http://jsfiddle.net/abLun3fp/1/

Answer 1

1. 出现此问题是因为jQuery Mobile使用其他HTML标记包装并向其添加事件侦听器。 诀窍是用原始的替换包装的HTML，并在追加到页面后触发初始化：

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

2. 您可以在将其添加到页面之前清空克隆中的所有值：

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

3. 它可以通过以下方式实现：

     $('.phone-info:first') 

或者使用原始HTML：

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

由于强烈建议不要使用具有相同ID的多个元素，因此我将它们更改为类。

小提琴

HTML：

 Add Phone 
 
 
 Phone  
 
 Usage  Option 1 Option 2 Option 3  
 
  

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，那么这里有固定的JS和原始的HTML。

更新 。 感谢@Omar指出和.enhanceWithin()的错误。