我该如何解决jQuery问题?

时间:2015-09-23 00:34:20

标签: jquery-ui autocomplete

我是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选择器或是否还有其他问题。有人可以指导我解决这个问题吗...请!!

1 个答案:

答案 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设置值后。检查更多错误,并告诉我你收到的错误。