jQuery Autocomplete not working for Dynamic Form Fields

Question

Hey folks... I am back with another issue...

I am using jquery Autocomplete on a form field. It works!

The issue is, then dynamically I add another row to the form, it doesn't. Yes, I keep toggle the id of the new field to a new one.

Original = exampassed1 Dynamically Added = exampassed2, exampassed3 and so on...

I have already added their jQuery equivalents

$("#exampassed1").autocomplete({
    source: "exams.php",
    minLength: 2
});

$("#exampassed2").autocomplete({
    source: "exams.php",
    minLength: 2
});

and so on...

I think the problem is that jQuery is not recognizing the dynamically added elements, it only reads the elements present on load...

Is there any way that we can poke the jquery handler to read these new added elements??

I heard of the bind and live functions, albeit I cannot find a way to implement those...

Any little/full help here is much appreciated... cheers!

The jQuery I use

$().ready(function() {
    $("#autonco").autocomplete({
        source: "nco.php",
        minLength: 2
    });

    $("#autonco1").autocomplete({
        source: "nco.php",
        minLength: 2
    });

    $("#autonco2").autocomplete({
        source: "nco.php",
        minLength: 2
    });

    $("#exampassed1").autocomplete({
        source: "exams.php",
        minLength: 2
    });

    $("#exampassed2").autocomplete({
        source: "exams.php",
        minLength: 2
    });

});

The code that is already there...

    <td align="center" valign="top">            
    <input type="text" id="exampassed1" name="exam[]" />
    </td>

The code that is added dynamically...

    <td valign="top" align="center">            
    <input id="exampassed2" name="exam[]" type="text">
    </td>

Any pointers are also appreciated!

Many thanks again!

Answer 1

Don't call another $().autocomplete until you get a call back from the previous one. If you have them cascaded like that, the javascript engine will run through them all before you get a callback from the first. Therefore it can't find what it's looking for.

Answer 2

Below is the code I used. Solved it!

$().ready(function() {

    $("#exampassed1").autocomplete({
        source: "exams.php",
        minLength: 2
    });

    $("#exampassed2").live('focus', function() {

        $("#exampassed2").autocomplete({
        source: "exams.php",
        minLength: 2
        });

    });

});

Cheers!