jQuery-UI自动完成不适用于动态字段

Question

自动完成适用于静态字段，但它不适用于动态字段。

我试过.live()方法，因为我无法让它正常工作。

这里是我的HTML：

<table> 
    <tr class="selectmatprimas"> 
     <td> 
      <input type="text" class="selectmatprima" /> 
      <input type="text" name="matprimas[]" /> 
     </td> 
    </tr> 
    <tr class="clone" style="display:none;"> 
     <td> 
      <input type="text" class="selectmatprima" /> 
      <input type="text" name="matprimas[]" /> 
     </td> 
    </tr> 
</table> 
<input type="button" value="addmore" id="addmore" /> 

这里是我的JS：

var src = [ 
    { 
     "label": "Mat\u00e9ria Prima 1", 
     "value": "1" 
    }, 
    { 
     "label": "Mat\u00e9ria Prima 2", 
     "value": "2" 
    } 
]; 

$("input.selectmatprima").autocomplete({ 
    source: src, 
    select: function (event, ui) { 
     event.preventDefault(); 
     this.value = ui.item.label; 
     $(this).next().val(ui.item.value); 
    }, 
    focus: function (event, ui) { 
     event.preventDefault(); 
     this.value = ui.item.label; 
     $(this).next().val(ui.item.value); 
    } 
}); 

$("input#addmore").click(function(){ 
    var a = $('tr.clone').html(); 
    var b = $('tr.selectmatprimas:last'); 
    b.after("<tr class='selectmatprimas'>"+a+"</tr>"); 
}); 

Online DEMO

正如你可以看到，当我点击addmore按钮，自动完成没有按在新的领域工作...

Answer 1

我只有皮毛与您的代码，但这里的工作version

的关键是jQuery的on()功能，您可以阅读有关here