自动完成不适用于动态创建的输入字段 jQuery

Question

我在自动完成动态创建的字段时遇到了问题。

如附图所示，我通过点击加号创建了动态字段，在第一行自动完成可以工作，但在其他动态生成的字段上，自动完成不起作用。代码用于自动完成是

$(".account_code").dropdown({
onChange: function (val) {
var id=val;
var dataString = 'id='+ id +'&type=account_code';
alert(dataString);
$.ajax
({
type: "POST",
url: "include/ajax_data.php",
data: dataString,
dataType: 'json',
cache: false,
success: function(data)
{
console.log(data);
$("#account_description").val(data.value);
} 
});
}
});

动态行插入代码是

function add_row()
{
$rowno=$("#bank_payment_voucher tr").length;
$rowno=$rowno+1;
$("#bank_payment_voucher tr:last").after('<tr id="row'+$rowno+'"><td><div class="field"><select class="ui search dropdown account_code" id="account_code'+$rowno+'" name="account_code[]"><option value="">Select Code</option><?php foreach (get_lookups($data_code) as $key => $value){ ?><option value="<?php echo $value['code']; ?>"><?php echo $value['code']." | ".$value['description']; ?></option><?php } ?></select></div></td><td><div class="field"><input type="text" name="account_description[]" id="account_description'+$rowno+'" placeholder="Account Description" autocomplete="" value="" required=""></div></td><td><div class="required field"><input type="text" name="remarks[]" id="remarks'+$rowno+'" placeholder="Remarks" autocomplete="off" value="" required=""></div></td><td><div class="required field"><input type="text" name="cheque_number[]" id="cheque_number'+$rowno+'" placeholder="Cheque Number" autocomplete="off" value="" required=""></div></td><td><div class="field"><div class="ui fluid action input"><input type="number" name="amount[]" id="amount'+$rowno+'" placeholder="Amount" autocomplete="off" value=""><div class="ui green icon button"><i class="pk flag"></i> PKR</div></div></div></td><td><div class="field"><div class="ui fluid action input"><i class="minus circle icon red" onclick=delete_row("row'+$rowno+'") style="font-size: 2.5em; cursor: pointer;"></i></div></div></td></tr>');
}

控制台也没有显示任何错误。

要求是：在每个动态行上，都有一个固定的下拉列表，根据从下拉列表中选择的值，其余的表单字段将自动填写

请帮我处理这个

Answer 1

运行此程序时：

$(".account_code").dropdown({
... 
});

您将在DOM中找到所有具有类account_code的元素，并为它们分配一个行为，一个事件，该事件将在使用下拉功能时触发。

该代码可能首先运行。所以，当你用同一个类添加更多的元素时，它们永远不会得到该行为的赋值。

因此，在add_row函数中，您需要做的不仅是创建元素并附加它，还附加要在下拉列表中运行的事件。

您可以使用此方法重新分配行为：https://api.jquery.com/on/#on-事件选择器数据处理程序

或者，您也可以将第一个代码段(分配行为(封装在函数中，这样每次添加新的动态元素时都可以再次触发它。

希望这能有所帮助。

Answer 2

看看这是否有用。

$(document).ready(function() {
var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID

var x = 1; //initlal text box count
var availableAttributes = [
	  "account_address",
	  "account_address_city",
	  "account_address_country",
	  "account_address_state",
	  "account_address_street1",
	  "account_address_street2",
	  "account_address_zip",
	  "account_email",
	  "account_login",
	  "account_name",
	  "account_number",
	  "account_telephone"
];



$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); 

$(wrapper).find('input[type=text]:last').autocomplete({
source: availableAttributes
});	
//add input box
}
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})

$("input[name^='mytext']").autocomplete({
		source: availableAttributes
	});	

});
// autocomplete enablement

	

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>

Answer 3

我刚刚通过以下代码实现了它

$(document).ready(function(){
$(document).on('keydown', '.account_code', function() {
var id = this.id;
var splitid = id.split('_');
var index = splitid[1];
// Initialize jQuery UI autocomplete
$( '#'+id ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "include/ajax_data.php",
type: 'POST',
dataType: "json",
cache: false,
data: {search: request.term,request:1},
success: function( data ) {
//console.log(data);
response( data );
}
});
},
select: function (event, ui) {
$(this).val(ui.item.code); // display the selected text
var bank_code_id = ui.item.id; // selected value
//console.log(bank_code_id);
// AJAX
$.ajax({
url: 'include/ajax_data.php',
type: 'post',
cache: false,
data: {bank_code_id:bank_code_id,request:2},
dataType: 'json',
success:function(response){
var len = response.length;
if(len > 0){
var id = response[0]['id'];
var description = response[0]['description'];
// Set value to textboxes
document.getElementById('lookupcodeid_'+index).value = id;
document.getElementById('accountdescription_'+index).value = description;
}
}
});
return false;
}
});
});
});