Динамически добавлять строки с автозаполнением jQuery

Question

У меня есть таблица с одной строкой (текстовое поле) и кнопкой Добавить строку , когда пользователь нажимает кнопку Добавить строку, он динамически создает еще одну строку, содержащую текстовое поле.Также я применяю автозаполнение к этому текстовому полю. Теперь функция автозаполнения корректно работает с первой строкой, но когда я добавляю новые строки, она не работает.Ниже мой код, пожалуйста, скажите мне, где я не прав

Добавить функцию строки

function addRow(tableID) {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
            var colCount = table.rows[0].cells.length;
            for(var i=0; i<colCount; i++) {
                var newcell = row.insertCell(i);
                newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;
                    case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                    case "select-one":
                            newcell.childNodes[0].selectedIndex = 0;
                            break;
                }

            }

        }

jQuery Функция автозаполнения

$(function() {
        var availableTags = [
            "Apple",
            "Dell",
            "Microsoft",
            "Sony",

        ];
        $( "#product" ).autocomplete({
            source: availableTags
        });
    });

Добавить кнопку строки и таблицу с текстовым полем

<input type="image" src="../images/add.png" onClick="addRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
 <TR>
   <TD> <INPUT type="text" name="product" id="product" /> </TD>
 </TR>
</TABLE>

Answer 1

По сути, здесь произошло то, что новый элемент, который вы создали динамически, не был обнаружен функцией автозаполнения jQuery, поскольку он создается после вызова этой функции. Поэтому вам нужно вызывать функцию автозаполнения jQuery каждый раз после добавления строки (в конце функции addRow ()).