Question

AutoComplete works correctly for the static field, but it doesn’t work for dynamic fields.

I’ve tried .live() method for I could not get it to work correctly.

Here is my 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" />

​
Here is my 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

As you can see, when I click the addmore button, the autocomplete doesn’t work on the new fields…

Answer 1

I’ve only scratched the surface with your code but here’s a working version

The key is jQuery’s on() function which you can read about here