html javascript自动完成不适用于动态添加的文本框答案

【问题标题】：html javascript autocomplete not working with dynamically added textboxeshtml javascript自动完成不适用于动态添加的文本框
【发布时间】：2015-08-07 07:12:31
【问题描述】：

嗨，当我在 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>

这是我每次动态添加的，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 之后添加了自动完成功能，以尝试在我添加行后每次调用 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--;
        }
    }
}

有什么想法吗？交易

【问题讨论】：

标签： javascript php jquery dynamic autocomplete

【解决方案1】：

以下代码（来自您的帖子）将事件附加到页面上当前存在的具有DRUG_NAME 类的元素：

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

当您动态添加一个元素时，选择器将被更新，但事件仍然不会附加，请参阅此答案：Event binding on dynamically created elements?

使用该答案，连同他的答案中链接的@LcKjus (Bind jQuery UI autocomplete using .live())，我相信这对你有用（用这个 sn-p 替换上面的代码进行测试）：

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

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

附：正如其他人所指出的，在同一页面上拥有多个具有相同 id 的元素是不明智的。

【讨论】：

【解决方案2】：

您可能需要实时绑定。

看看这个帖子： Bind jQuery UI autocomplete using .live()

【讨论】：

【解决方案3】：

问题是您正在创建具有相同 ID DRUG_NAME 的元素，然后您正在应用自动完成按 ID 选择字段。

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

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

在创建新行时使用类选择器：

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

【讨论】：

我这样做了，但是如果 javascript 不在 html 中，则该类没有被读入。我不能将它们放在两个单独的文件中
前两个代码块在我的 index.php 中，动态输入在单独的文件 dynamicscript.js 中。我很困惑，因为将它们分开，自动完成不起作用。但是，如果我将 dynamicscript.js 的内容放在 index.php 的
是的，我确定动态脚本正在加载，因为我可以添加/删除行，只是自动完成功能不适用于新添加的行
没有任何错误，但是代码在 firefox 上有效，但在 google chrome 上无效
乐于助人。如果此答案或任何其他答案解决了您的问题，请将其标记为已接受。

【解决方案4】：

绑定自动完成的代码正在文档准备就绪时运行。添加动态文本框后，您需要再次运行它（可能创建一个 bindAuto() 函数或其他什么，然后从两个地方运行它）。

【讨论】：