html javascript自动完成不使用动态添加的文本框

嗨，当我在1个文本框上使用jquery自动完成时，它可以工作，但当我动态添加新文本框时，这些新文本框没有相同的自动完成功能

这是我的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>

$（文档）.ready（函数（）{
$（“.DRUG_NAME”）.autocomplete（“gethint.php”{
selectFirst:true
});
});

这就是我每次动态添加的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动态添加/删除行，我甚至在addrow之后添加了autocomplete函数，以尝试在每次添加行之后调用jquery autocomplete，但它仍然不起作用

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--;
        }
    }
}

函数addRow（tableID）{
var table=document.getElementById（tableID）；
var rowCount=table.rows.length；
如果（rowCount<5）{//限制用户创建超出限制的字段
var row=table.insertRow（rowCount）；
var colCount=table.rows[0].cells.length；
对于（var i=0；i您可能需要一个活动绑定

请看这篇文章：
问题在于，您正在创建具有相同ID的元素
DRUG\u NAME
，然后应用自动完成功能，按ID选择字段

从第一行的输入字段中删除id，因为它将被复制：

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

以下代码（来自您的帖子）将事件附加到页面上当前存在的class
DRUG\u NAME
元素上：

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

动态添加元素时，选择器将更新，但事件仍不会附加，请参见以下答案：

使用这个答案，再加上在他的答案（）中链接的@LcKjus，我相信这对您来说是可行的（用这个要测试的代码片段替换上面的代码）：

不过，这可能会多次运行自动完成代码（如果用户重新聚焦输入字段），因此请注意这一点

另一方面，正如其他人所指出的，在同一页面上有多个id相同的元素是不明智的。
绑定自动完成的代码正在文档就绪状态下运行。添加动态文本框后，您需要再次运行它（可能创建bindAuto（）函数或其他任何函数，并从两个位置运行它）.
我这样做了，但是如果javascript不在html中，类就不会被读取。我不能将它们放在两个单独的文件中。前两个代码块在index.php中，动态输入在一个单独的文件dynamicscript.js中。我很困惑，因为将它们分开，自动完成就不起作用了。但是，如果我把内容放在是的，我确信动态脚本正在加载，因为我可以添加/删除行，只是自动完成不会在新添加的行上工作。没有任何错误，但是代码在firefox上工作，但在google chromeHappy上不起作用。如果这个答案或任何其他答案解决了您的问题，我将为您提供帮助请将其标记为已接受。
$(".DRUG_NAME").autocomplete("gethint.php", {
    selectFirst: true
});

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