使用 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({&nbsp; &nbsp; source: function (query, result) {&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: "searchProducts.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: 'query=' + query,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataType: "json",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function (data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; result($.map(data, function (item) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return item;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }});var i=1;$('#add').click(function(){&nbsp; &nbsp; i++;&nbsp; &nbsp; $('#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>');&nbsp; &nbsp; $('#product'+i).typeahead({&nbsp; &nbsp; source: function (query, result) {&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: "searchProducts.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: 'query=' + query,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataType: "json",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function (data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; result($.map(data, function (item) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return item;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }});});