Javascript autocomplete无法处理动态创建的输入字段jQuery
我在动态创建字段的自动完成中面临问题 正如附件中的图片一样,我通过点击加号创建了动态字段,第一行的autocomplete正在工作,而其余动态生成的autocomplete则不工作。 代码用于自动完成Javascript autocomplete无法处理动态创建的输入字段jQuery,javascript,php,jquery,Javascript,Php,Jquery,我在动态创建字段的自动完成中面临问题 正如附件中的图片一样,我通过点击加号创建了动态字段,第一行的autocomplete正在工作,而其余动态生成的autocomplete则不工作。 代码用于自动完成 $(".account_code").dropdown({ onChange: function (val) { var id=val; var dataString = 'id='+ id +'&type=account_code';
$(".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>');
}
控制台也没有显示任何错误
要求是:在每个动态行上,都有一个固定的下拉列表,根据从下拉列表中选择的值,表单的其余字段将自动填充
运行此操作时,请在此帮助我:
$(".account_code").dropdown({
...
});
您将在DOM中找到所有带有类account_代码的元素,并为它们指定一个行为,一个事件,当使用下拉功能时将触发该事件
该代码可能首先运行。
因此,当您为同一个类添加更多元素时,它们从未获得该行为的赋值
因此,在add_row函数中,您需要做的不仅仅是创建元素并附加它,还需要附加要在下拉列表中运行的事件
您可以使用此方法重新分配行为:
或者,您也可以将第一个代码段赋值行为封装到函数中,以便在每次添加新的动态元素时再次触发它
希望这有帮助。看看这是否有用
$document.readyfunction{
var max_fields=10;//允许的最大输入框数
var wrapper=$.input\u fields\u wrapp;//fields wrapper
var add\u button=$.add\u字段\u button;//添加按钮ID
var x=1;//初始文本框计数
var可用属性=[
账户地址,
账户地址城市,
账户、地址、国家、,
账户、地址、州、,
账户地址街道1,
账户地址街道2,
账户地址邮政编码,
帐户和电子邮件,
帐户登录,
账户名称,
账号,
客户电话
];
$add_按钮。单击函数{//在添加输入按钮上单击
e、 防止违约;
ifx$(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;
}
});
});
});
用作$.parent\u static\u div\u class.find'.account\u code'。下拉列表{…亲爱的devsi,我试过了,但没有成功:-你在使用Bootstrap JS下拉列表吗?显示你在哪里添加了。account_代码类在HTML@UmairMehmoodno中我在使用sementic UI,关于你在hi中询问的类,你能给我一个小例子吗?所以你需要在add_行函数中做的不仅仅是创建元素和附录下载它,但也附加您想要在下拉列表上运行的事件。因为我对jquery了解不多。谢谢