CODEWITHSUNDEEP
jqueryhtmljquery-ui
AppleTattooGuy
AppleTattooGuy

Reputation: 1175

jQuery append elements not working with autocomplete

jQuery newbie here, I have a table with 2 rows in, the input elements in these rows are set to autocomplete, this works perfectly.

I have an 'add line' button that when clicked, jQuery appends a new line onto the table, this also works perfectly but the problem is that the autocomplete does not work on the appended elements, they are the same as the elements above that work perfectly. Am I missing something here? is there a way to get around whatever the problem is here?

The code is below.

jQuery 

<script>
$(function() {

    $( ".id" ).autocomplete(
    {
         source: "autocomp.php?part=id"
    })

});

$(function() {

    $( ".internal" ).autocomplete(
    {
         source: "autocomp.php?part=internal"
    })

});

$(function() {

    $( ".title" ).autocomplete(
    {
         source: "autocomp.php?part=title"
    })

});

$(document).ready(function() {
$('a').click(function() {
   $('table').append('<tr><td><input name="id" class="id" type="text" /></td><td><input name="quantity" class="quantity" type="text" /></td><td><input name="internal" class="internal" type="text" /></td><td><input name="title" class="title" type="text" /></td><td>&pound;</td><td>&pound;</td></tr>');
});
});
</script>

and the HTML 

<table class="products" id="table" border="1" bordercolor="#000000" style="background-color:#FFFFFF; margin-left:5%; margin-top:40px;" width="90%" cellpadding="3" cellspacing="3">

    <tr>
        <td><b>ID</b></td>
        <td><b>Quantity</b></td>
        <td><b>Internal Name</b></td>
        <td><b>Title</b></td>
        <td><b>Unit Price</b></td>
        <td><b>Total</b></td>
    </tr>

    <tr>
        <td><input name="id" class="id" type="text" /></td>
        <td><input name="quantity" class="quantity" type="text" /></td>
        <td><input name="internal" class="internal" type="text" /></td>
        <td><input name="title" class="title" type="text" /></td>
        <td>&pound;</td>
        <td>&pound;</td>
    </tr>

    <tr>
        <td><input name="id" class="id" type="text" /></td>
        <td><input name="quantity" class="quantity" type="text" /></td>
        <td><input name="internal" class="internal" type="text" /></td>
        <td><input name="title" class="title" type="text" /></td>
        <td>&pound;</td>
        <td>&pound;</td>
    </tr>
            </table>

            <a href="javascript:void(0);">Add Line</a>

Many thanks in advance for your help.

Upvotes: 0

Views: 2274

Answers (1)

Hamza Kubba
Hamza Kubba

Reputation: 2269

After you add the new input fields, you need to run your autocomplete() function again, since it has only been run on the old input elements (when the page loaded) and has not run on the new input elements.

Upvotes: 2

Related Questions