jQuery自动完成功能不适用于动态表单字段

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

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!