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