Php 自动完成对动态创建的行不起作用
我想动态添加行,所有行都必须具有唯一的id,并在此处自动建议我的代码。不幸的是,它不起作用 我有以下结果Php 自动完成对动态创建的行不起作用,php,javascript,Php,Javascript,我想动态添加行,所有行都必须具有唯一的id,并在此处自动建议我的代码。不幸的是,它不起作用 我有以下结果 动态添加行 动态添加的所有测试框的自动建议 所有动态添加元素的唯一id $(document).ready(function() { var currentItem = 1; $('#itemCode_1').autocomplete({ source: 'data/item-data.php', minLength: 1, select: function(event, ui) {
$(document).ready(function()
{
var currentItem = 1;
$('#itemCode_1').autocomplete({
source: 'data/item-data.php',
minLength: 1,
select: function(event, ui) {
var $itemrow = $(this).closest('tr');
$itemrow.find('#itemCode_1').val(ui.item.itemCode);
$itemrow.find('#itemDesc_1').val(ui.item.itemDesc);
$itemrow.find('#itemPrice_1').val(ui.item.itemPrice);
$('#itemQty_1').focus();
return false;
}
}).data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.itemCode + " - " + item.itemDesc + "</a>" )
.appendTo( ul );
};
$('#addRow').click(function(){
currentItem++;
var strToAdd = '<tr class="item-row"><td></td><td><input name="itemCode[]" value="" class="tInput" id="itemCode_'+currentItem+'" tabindex="1"/> </td><td><input name="itemDesc[]" value="" class="tInput" id="itemDesc_'+currentItem+'" readonly="readonly" /></td><td><input name="itemQty[]" value="" class="tInput" id="itemQty_'+currentItem+'" onChange="calc('+currentItem+')" tabindex="2"/></td><td><input name="itemPrice[]" value="" class="tInput" id="itemPrice_'+currentItem+'" onChange="calc('+currentItem+')"/> </td><td> <input type="text" name="sub_total" id="sub_total_'+currentItem+'"></td></tr>';
$('#itemsTable').append(strToAdd);
});
var bindfield=$('itemCode_'+currentItem+'');
var itemdes=$('#itemDesc_'+currentItem+'');
var itempr=$('#itemPrice_'+currentItem+'');
var itemqty=$('#itemQty_'+currentItem+'');
bindfield.each(function(){
$(this).autocomplete({
source: 'data/item-data.php',
minLength: 1,
select: function( event, ui ) {
var $itemrow = $(this).closest('tr');
$itemrow.find(bindfield).val(ui.item.itemCode);
$itemrow.find(itemdes).val(ui.item.itemDesc);
$itemrow.find(itempr).val(ui.item.itemPrice);
$(itemqty).focus();
return false;
}
});
})
$('#itemCode').focus(function(){
window.onbeforeunload = function(){ return "You haven't saved your data. Are you sure you want to leave this page without saving first?"; };
});
});
$(文档).ready(函数()
{
var currentItem=1;
$(“#项目代码_1”)。自动完成({
来源:“data/item data.php”,
最小长度:1,
选择:功能(事件、用户界面){
var$itemrow=$(this.closest('tr');
$itemrow.find('#itemCode_1').val(ui.item.itemCode);
$itemrow.find('#itemDesc_1').val(ui.item.itemDesc);
$itemrow.find('#itemPrice_1').val(ui.item.itemPrice);
$('#itemQty_1')。焦点();
返回false;
}
}).数据(“自动完成”)。\u renderItem=功能(ul,项目){
返回$(“”)
.data(“item.autocomplete”,item)
.append(“+item.itemCode+”-“+item.itemDesc+”)
.附录(ul);
};
$('#addRow')。单击(函数(){
currentItem++;
var strToAdd='';
$('#itemsTable').append(strToAdd);
});
var bindfield=$('itemCode_'+currentItem+'');
var itemdes=$('#itemDesc'+currentItem+'');
var itempr=$(“#itemPrice”+currentItem+”);
var itemqty=$('#itemqty'+currentItem+'');
bindfield.each(函数(){
$(此)。自动完成({
来源:“data/item data.php”,
最小长度:1,
选择:函数(事件,ui){
var$itemrow=$(this.closest('tr');
$itemrow.find(bindfield.val(ui.item.itemCode);
$itemrow.find(itemdes.val(ui.item.itemDesc);
$itemrow.find(itempr.val)(ui.item.itemPrice);
$(itemqty.focus();
返回false;
}
});
})
$('#itemCode')。焦点(函数(){
window.onbeforeunload=function(){return“您还没有保存数据。确实要离开此页而不先保存吗?”;};
});
});
您可以指定类名而不是ID,方法是指定,这样自动完成将应用于具有指定类名的所有元素。在上面的代码中,您可以指定 $('.CLASSNAME).autocomplete({})强> 而不是 $('itemCode_1')。自动完成({})强> 为动态创建的元素提供以下代码 $('.CLASSNAME').live('keydown.autocomplete',function(){ })) 为动态创建的元素指定相同的类名。。。 希望这能起作用试试这个…
jQuery(document).ready(函数($){
jQuery(document).ready(function($){
var counter =2;
var count=2;
$("#addmember").click(function () {
$('#member').append('<input type="text" name="member' +counter+ '" id="member' + counter + '">');
counter++;
jQuery("#member" +count+ "").autocomplete('Your Url', {
multiple: false,
matchContains: true,
width: 180,
selectFirst: true,
});
jQuery("#member" +count+ "").result(function(event, data, formatted) {
count++;
}
});
});
});
var计数器=2;
var计数=2;
$(“#addmember”)。单击(函数(){
$(“#成员”)。追加(“”);
计数器++;
jQuery(“#成员”+count+”).autocomplete('您的Url'{
多重:假,
对,,
宽度:180,
selectFirst:是的,
});
jQuery(“#member”+count+”).result(函数(事件、数据、格式化){
计数++;
}
});
});
});
这是在标题部分和正文中
<input name="member1" id="member1" type="text" />
<div id="member"></div>
不工作意味着它如何工作expalin详细说明我可以动态添加行,自动完成的第一行工作正常,但我们为自动完成动态添加的其他行不工作它看起来像是您直接复制并尝试执行的,不知道除了添加唯一id之外还有什么用?我看到您在其中添加了一个函数来执行calc
,但没有给我们提供该函数。我建议用你拥有的东西制作一个JSFIDLE,这样我们就可以看到你拥有的所有东西——尽管更改为JSFIDLE的本地源代码。感谢你的帮助,它可以工作,但现在我陷入了另一个问题,它通常可以动态添加texbox,但当我们编辑之前的文本框时,它无法填充值。我的代码类似于jQuery(“#member”+count+”).autocomplete('get#course_list2.php',{multiple:false,matchContains:true,width:180,selectFirst:true,});jQuery(“#member”+count+”).result(函数(事件,数据,格式化){var tempcount=counter-1;alert(count);alert(data[1]);$(“#price”+count+”).val(data[1]);count++});谢谢你的回复。请这样检查,首先添加3个或更多的文本框,然后更改前一个文本框,在这种情况下,我们可以获得自动建议,但它无法更改我们存储在item price中的值。然后尝试添加另一个文本框,此时没有自动提示再次出现。添加另一个文本框时,效果平滑。希望我的分享是正确的,如果你不介意的话,我可以得到你的通讯电子邮件id,我的是ameer@woolpack.in
<input name="member1" id="member1" type="text" />
<div id="member"></div>