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

时间:2012-07-18 16:57:54

标签: jquery html json jquery-ui jquery-ui-autocomplete

AutoComplete对静态字段的工作正常,但它不适用于动态字段。

我尝试了.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

正如您所看到的,当我点击“添加”按钮时,自动填充功能对新字段无效...

1 个答案:

答案 0 :(得分:3)

我只是用你的代码表面,但这是一个有效的version

关键是jQuery的on()函数,你可以阅读here