jQuery追加元素无法与自动完成一起使用 [英] jQuery append elements not working with autocomplete

问题描述

这里是jQuery新手，我有一个包含2行的表，这些行中的输入元素设置为自动完成，效果很好.

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

我有一个添加行"按钮，当单击该按钮时，jQuery将新行添加到表上，这也可以很好地工作，但是问题是自动完成功能不适用于添加的元素，它们与元素相同上面的工作完美.我在这里想念什么吗?有什么办法可以解决这里存在的问题吗?

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?

代码在下面.

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>

和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>

在此先感谢您的帮助.

推荐答案

添加新的输入字段后，您需要再次运行autocomplete()函数，因为该函数仅在旧的输入元素上运行(当页面已加载)，并且尚未在新的输入元素上运行.

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.

这篇关于jQuery追加元素无法与自动完成一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！