使用 Java 脚本动态创建的输入不显示下拉列表

Question

我正在构建一个包含文本输入的部分（它具有使用数据库的下拉列表），并动态添加更多相同的输入。第一个输入如下所示：在我动态添加另一个输入后，第二个输入无法显示下拉列表。它看起来像这样：我没有js / ajax教育，所以试图使用我的java知识编辑我在互联网上找到的js的代码部分。第一行的 html 部分如下所示：<tr class="no-border" id="articles">    <td class="text-center" style="padding: 7px;padding-right: 0;padding-left: 0;">        <i class="fas fa-plus" name="add" id="add"></i>    </td>    <td style="padding: 5px;">        <div class="dropdown">            <input type="text" class="form-control form-control-sm" name="product1" id="product1" autocomplete="off" required form="purchaseForm" />        </div>    </td>    <td style="padding: 5px; max-width: 40px;">        <input type="number" class="form-control form-control-sm" step="0.001" required />    </td>    <td style="padding: 5px; max-width: 40px;">        <input type="number" class="form-control form-control-sm" step="0.001" required />    </td></tr>用于创建新行和创建下拉列表的 javascript 部分如下所示：var i=1;$('#add').click(function(){    i++;    $('#dynamic_field').append('<tr class="no-border" id="row'+i+'"><td class="text-center" style="padding: 7px;padding-right: 0;padding-left: 0;"><button class="btn btn_remove" name="remove" id="'+i+'" type="button" style="padding: 0;"><i class="fas fa-minus"></i></button></td><td style="padding: 5px;"><div class="dropdown"><input type="text" class="form-control form-control-sm" name="product'+i+'" id="product'+i+'" autocomplete="off" required form="purchaseForm" /></div></td><td style="padding: 5px; max-width: 40px;"><input type="number" class="form-control form-control-sm" step="0.001" required /></td><td style="padding: 5px; max-width: 40px;"><input type="number" class="form-control form-control-sm" step="0.001" required /></td></tr>');});$(document).on('click', '.btn_remove', function(){    var button_id = $(this).attr("id");     $('#row'+button_id+'').remove();});是的，动态创建的输入被命名为 product2、product3，依此类推...使用td和div与原始的相同。好吧，我确信这个问题是由于我对javascript工作原理的无知造成的。任何帮助将不胜感激。谢谢大家。

Answer 1

解决方案就像穆吉伯在评论中提到的一样简单。调用函数以在 $（'#add'）中创建下拉列表，单击（函数（）{，在创建行后立即解决了它：

我修改了仅对 product1 输入的第一个调用，而不是尝试在 for 循环中循环它，并复制了每个动态创建的产品的函数，因为我不知道如何创建函数并调用它们。

$('#product1').typeahead({

    source: function (query, result) {

        $.ajax({

            url: "searchProducts.php",

            data: 'query=' + query,            

            dataType: "json",

            type: "POST",

            success: function (data) {

                result($.map(data, function (item) {

                    return item;

                }));

            }

        });

    }

});

var i=1;

$('#add').click(function(){

    i++;

    $('#dynamic_field').append('<tr class="no-border" id="row'+i+'"><td class="text-center" style="padding: 7px;padding-right: 0;padding-left: 0;"><button class="btn btn_remove" name="remove" id="'+i+'" type="button" style="padding: 0;"><i class="fas fa-minus"></i></button></td><td style="padding: 5px;"><div class="dropdown"><input type="text" class="form-control form-control-sm" name="product'+i+'" id="product'+i+'" autocomplete="off" required form="purchaseForm" /></div></td><td style="padding: 5px; max-width: 40px;"><input type="number" class="form-control form-control-sm" step="0.001" required /></td><td style="padding: 5px; max-width: 40px;"><input type="number" class="form-control form-control-sm" step="0.001" required /></td></tr>');

    $('#product'+i).typeahead({

    source: function (query, result) {

        $.ajax({

            url: "searchProducts.php",

            data: 'query=' + query,            

            dataType: "json",

            type: "POST",

            success: function (data) {

                result($.map(data, function (item) {

                    return item;

                }));

            }

        });

    }

});

});