使用 Javascript 动态创建的输入不显示下拉列表答案

【问题标题】：Dynamically Created Inputs with Javascript Don't Show Drop Down List使用 Javascript 动态创建的输入不显示下拉列表
【发布时间】：2020-02-16 14:48:29
【问题描述】：

我正在构建一个包含文本输入的部件（它有一个使用数据库的下拉列表），并动态添加更多相同的输入。第一个输入如下所示：

动态添加另一个输入后，第二个输入无法显示下拉列表。它看起来像这样：

我没有受过 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();
});

for(j = 1; j < (i + 1); j++){
    $('#product'+j).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;
                    }));
                }
            });
        }
    });
}

是的，动态创建的输入被命名为 product2、product3 等等... td 和 div 与原始输入相同。好吧，我确信问题是由于我对 javascript 工作原理的无知造成的。任何帮助将不胜感激。谢谢大家。

【问题讨论】：

对不起！我看不到您如何创建选择框，也没有看到任何有问题的 php，如果不是您的答案，这可能是您的答案stackoverflow.com/questions/50948170/…！然后用更多细节更新您的问题
事件尚未绑定到新创建的输入，您必须在附加新输入后重新运行 for 循环中的代码。希望这对你有帮助，
你知道动态创建新输入后如何在不刷新页面的情况下重新运行代码吗？您也可以将其写为最终答案。

标签： javascript php html ajax drop-down-menu

【解决方案1】：

解决方案就像评论中提到的 Mujibur 一样简单。在 $('#add').click(function(){ 中调用函数创建下拉列表，在创建行后立即解决：

我修改了仅针对 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;
                }));
            }
        });
    }
});
});

【讨论】：