0

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.

4

1 回答 1

2

添加新的输入字段后，您需要autocomplete()再次运行您的函数，因为它只在旧输入元素上运行（当页面加载时）并且没有在新输入元素上运行。

于 2013-10-15T12:48:26.557 回答