Автозаполнение html javascript не работает с динамически добавляемыми текстовыми полями

Привет, когда я использую автозаполнение jquery в 1 текстовом поле, оно работает, но когда я динамически добавляю новое текстовое поле, эти новые текстовые поля не имеют такого же автозаполнения

Вот мой автозаполнение javascript

<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script type="text/javascript" src="dynamicscript.js"></script> 
<script>
    $(document).ready(function(){
        $(".DRUG_NAME").autocomplete("gethint.php", {
            selectFirst: true
        });

    });
</script>

это то, что я динамически добавляю каждый раз, html-код

<form method="post">

    <p>
        <input type="button" value="Add Drug" onClick="addRow('dataTable')" />
        <input type="button" value="Remove Drug" onClick="deleteRow('dataTable')" />
    </p>

    <table id="dataTable" class="form" border="1">
        <tbody>
            <tr>
                <p>
                    <td>
                        <input type="checkbox" required="required" name="chk[]" checked="checked" />
                    </td>
                    <td>
                        <label>Drug</label>
                        <input type="text" required="required" name="DRUG_NAME[]" id="DRUG_NAME" class="DRUG_NAME">
                    </td>

                </p>
            </tr>
        </tbody>
    </table>

    <input type="submit" value="Save" />
</form>

это javascript, динамически добавляющий/удаляющий строку, я даже добавил функцию автозаполнения после моей надстройки, чтобы попытаться вызвать автозаполнение jquery каждый раз после добавления строки, но это все еще не работает

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if(rowCount < 5) {  // limit the user from creating fields more than your limits
        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;
        }
    } else {
        alert("Maximum Drug is 5");    
    }

    $("#DRUG_NAME").autocomplete("gethint.php", {
        selectFirst: true
    });
}

function deleteRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    for(var i=0; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
            if(rowCount < 1) {  // limit the user from removing all the fields
                alert("Nothing to Remove");
                break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
}

Любые идеи?? TX


person Teddy Dong    schedule 07.08.2015    source источник


Ответы (4)


Следующий код (из вашего поста) прикрепляет события к элементам класса DRUG_NAME, которые в настоящее время существуют на странице:

$(".DRUG_NAME").autocomplete("gethint.php", {
    selectFirst: true
});

Когда вы динамически добавляете элемент, селектор которого будет обновлен, но события по-прежнему не будут прикреплены, см. этот ответ: Привязка событий динамически созданные элементы?

Используя этот ответ вместе с тем, на который @LcKjus ссылается в своем ответе (Связать автозаполнение пользовательского интерфейса jQuery с помощью .live()), Я считаю, что это сработает для вас (замените приведенный выше код этим фрагментом для проверки):

$(".DRUG_NAME").on("focus", function (event) {
   $(this).autocomplete(options);
});

Это может запускать код автозаполнения несколько раз (если пользователь перефокусирует поле ввода), так что помните об этом.

P.S. Как отмечали другие, неразумно иметь несколько элементов с одним и тем же идентификатором на одной странице.

person Erik Inkapööl    schedule 07.08.2015

Вероятно, вам нужна живая привязка.

Взгляните на этот пост: Связать автозаполнение пользовательского интерфейса jQuery с помощью .live()

person LcKjus    schedule 07.08.2015

Проблема в том, что вы создаете элементы с одинаковым идентификатором DRUG_NAME, а затем применяете автозаполнение, выбирая поле по идентификатору.

Удалите идентификатор из поля ввода первой строки, так как он будет реплицироваться:

<input type="text" required="required" name="DRUG_NAME[]" class="DRUG_NAME">

Используйте селектор класса при создании новых строк:

$(".DRUG_NAME").autocomplete("gethint.php", {
// ^^
    selectFirst: true
});
person MazzCris    schedule 07.08.2015
comment
я сделал это, однако, если javascript не находится в html, класс не читается. я не могу иметь их в двух отдельных файлах - person Teddy Dong; 07.08.2015
comment
первые два блока кода находятся в моем index.php, а динамический ввод — в отдельном файле dynamicscript.js. я запутался, так как они оба разделены, автозаполнение не работает. однако, если я помещу содержимое dynamicscript.js в тег ‹script› в index.php, автозаполнение будет работать. - person Teddy Dong; 07.08.2015
comment
да, я уверен, что динамический скрипт загружается, так как я могу добавлять/удалять строки, просто автозаполнение не будет работать для вновь добавленных - person Teddy Dong; 07.08.2015
comment
ошибок нет, однако код работает в firefox, но не в google chrome - person Teddy Dong; 07.08.2015
comment
Рад помочь. Если этот или любой другой ответ решил вашу проблему, отметьте его как принятый. - person MazzCris; 08.08.2015

Код для привязки автозаполнения запускается для готового документа. Вам нужно запустить его снова после того, как вы добавите динамические текстовые поля (возможно, создайте функцию bindAuto() или что-то еще и запустите ее из обоих мест).

person SteveCav    schedule 11.05.2020