我是jQuery的新手,想知道是否有人会给我一个正确的方向。
我正在编写(更像是复制粘贴)来自其他SO答案的自动完成代码:
$("#addmore").on("click", function(){
var rownum = $('#orderTable tr:last').attr('id')*1+1;
var rowhtml =' <tr id="' + rownum +'"> '+
' <td> '+
'<input type="text" class="autoCompItem form-control input-small" id="itembox" name="item" placeholder="Eggs" value="e"> '+
' </td> '+
' <td> '+
'<input type="text" class="form-control input-small" id="quantity1" name="quantity1" placeholder="24"> '+
' </td> '+
' <td> '+
'<select class="form-control "> '+
'<option value="">Units</option> '+
'<option value="lbs">lbs</option> '+
'<option value="packs">Packs</option> '+
'<option value="cartons">Cartons</option> '+
'<option value="gallons">Gallons</option> '+
' </select> '+
' </td> '+
' <td> '+
'<input type="text" class="form-control input-small" id="brand1" name="brand1" placeholder="Eggland"> '+
'</td> '+
'<td> '+
'<input type="text" class="form-control input-small" id="comment1" name="comment1" placeholder="Choose fresh"> '+
'</td> '+
'</tr>';
$(rowhtml).appendTo("#orderTable");
$(rowhtml).find(ipt).autocomplete({
source: function(request, response){
alert('req term:'+request.term);
$.ajax({
url: '/api/autocomplete',
data: {'q': request.term},
dataType: "json",
success: function(data){
response(data);
}
});
},
focus: function(event, ui){
$(this).val(ui.item.name);
return false;
},
select: function(event, ui){
$(this).val(ui.item.name);
return false;
}
}).data("ui-autocomplete")._renderItem = function(ul, item) {
return $( "<li></li>" )
.data( "ui-autocomplete-item", item )
.append( "<a>" + item.name + "</a>" )
.appendTo( ul );
};
});
我的renderItem函数失败了,我想解决问题,看看我的rowhtml(一个动态添加的元素)变量是否找不到ipt选择器或是否还有其他问题。有人可以指导我解决这个问题吗...请!!
答案 0 :(得分:1)
第1部分。
我首先要检查开发者控制台中的错误。要执行此操作,请在加载后右键单击页面,然后单击inspect元素。完成该步骤后,您将在屏幕底部看到一个新窗口。接下来选择控制台选项卡。
选择控制台选项卡后我会按f5按钮 这将刷新页面。它会看到它的优点 如果你的代码在页面加载时有任何错误。
在自动填充文本框中输入完成后,查看控制台是否出现任何错误。如果未设置变量值,则JavaScript将输出undefined到控制台。如果没有设置对象的值,JavaScript将输出null。
记下您收到的任何错误以及发生的错误,我会尽力帮您调试代码。
第2部分。
现在你发现了一个错误。我们需要回溯一步。我将您发布的代码放在try catch块中并将其加载到jsfiddle中以查看加载时发生的错误。按照第1部分中的步骤突出显示您应该得到相同的错误。除非您的问题中缺少某些代码。
当我跑下面的小提琴时:
https://jsfiddle.net/larryjoelane/6hkrdrv1/7/
var rowhtml =' <tr id="' + rownum //<--- Is this variable value assigned?
我收到此错误消息:ReferenceError:未定义rownum。当我查看你的代码时,我注意到你的代码中没有设置rownum变量值。为rownum设置值后。检查更多错误,并告诉我你收到的错误。