我正在構建一個包含文本輸入的部分（它具有使用數據庫的下拉列表），并動態添加更多相同的輸入。第一個輸入如下所示：在我動態添加另一個輸入后，第二個輸入無法顯示下拉列表。它看起來像這樣：我沒有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工作原理的無知造成的。任何幫助將不勝感激。謝謝大家。
1 回答
蕭十郎
TA貢獻1815條經驗 獲得超13個贊
解決方案就像穆吉伯在評論中提到的一樣簡單。調用函數以在 $（'#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;
}));
}
});
}
});
});
- 1 回答
- 0 關注
- 88 瀏覽
添加回答
舉報
0/150
提交
取消