Question

很抱歉提出已经回答的问题，我读了它们，但我无法弄清楚如何将它们应用到我的问题中。

基本上我有一个带有此输入的表单

<input class="auto" type="text" name="id_item[]" placeholder="Article ID" required style="width: 15%;"/>

然后我在它下面有一个空div，当我点击添加按钮

时，我在其中放置了newcly创建的输入

<div id="next_items">
</div>

我创建和删除新输入的功能如下所示

$(document).ready( function() {
    $("#add_item").click( function() {
        $("#next_items").append('<input class="auto" class="new_id" type="text" name="id_item[]" placeholder="Article ID" required style="width: 15%;"/>');
    });

    $("#remove_item").click( function() {
        $(".new_id:last").remove();
    });
});

最后一件事是我的自动完成js

$('input.auto').each(function() {
    $(this).autocomplete({
        source: "contract/auto",
        minLength: 1
    });
});

它适用于我的第一次输入，它始终存在，但是当我用按钮添加新输入时，它不起作用。我尝试使用每个功能，它仍然无法正常工作。这些类也开始在创建的按钮中混淆。我该如何解决这个问题？

Answer 1

添加后，您需要为该文本框绑定自动完成功能：

$("#add_item").click( function() {
    $("#next_items").append('<input class="auto" class="new_id" type="text" name="id_item[]" placeholder="Article ID" required style="width: 15%;"/>');
    $("#next_items .auto:last").autocomplete({
        source: "contract/auto",
        minLength: 1
    });
});

如何将自动完成添加到动态创建的输入？

1 个答案: