jquery - 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>");
});

在线演示

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

Answer 1

我只是用你的代码触及了表面，但这是一个工作版本

关键是 jQuery 的on()函数，你可以在这里阅读