jQuery-UI AutoComplete 不适用于动态字段

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

如您所见，当我单击添加更多按钮时，自动完成功能在新字段上不起作用...

Answer 1

我只是用你的代码触及了表面，但这是一个有效的version

关键是 jQuery 的 on() 函数，您可以阅读有关 here 的信息