如何使该链接在 JQuery UI 自动完成中可单击？未捕获的类型错误

我正在尝试使用 Jquery UI 自动完成插件，并且我想在建议框中呈现一些 html，并带有可点击的链接。 html 似乎呈现正常，但是当我单击链接时，它们不起作用，并且我进入了我的开发人员日志：

jquery-ui.min.js:239Uncaught TypeError: Cannot call method 'data' of null

Uncaught TypeError: Cannot call method 'data' of null
a.widget._create.menu.a.addClass.appendTo.mousedown.menu.selectedjquery-ui.min.js:239
a.Widget._triggerjquery-ui.min.js:23
a.widget.selectjquery-ui.min.js:252
a.widget._createjquery-ui.min.js:247
f.event.handlejquery.min.js:17
f.event.add.k.i.handle.k jquery.min.js:16

我在 HTML 和 Jquery 端使用以下代码，语法与 Rails 中的 Haml 相同。在第一个脚本标记中，我仅定义一个模板，然后使用 Underscore.js 进行渲染。

这个问题 https://stackoverflow.com/questions/2497076/add-a-link-to-a-jqueryui-autocomplete-item似乎引用了类似的问题，但我不明白答案"I think autocomplete uses an <a> for the element that provides the click event. In that case, you'll need to unset that click handler"

我将不胜感激任何指导！我已经被困在这个问题上两天了。谢谢！

= text_field_tag :search, nil, :class => "jq_watermark", :id => "product-search-input", :title => "Keywords, Tags, Items, SKU..."

%script(type="text/html" id="product-autocomplete-result-template")
  .cell.img
    %img(src='{{ main_image_thumb }}')
  .cell
    %h2= link_to '{{ label }}', CGI::unescape(product_path('{{ id }}'))
    .clear
    = link_to '{{ customer_count }} people have this', '#'
    %span Rating {{ rating }}
    %div{:id => "stars-wrapper-{{ id }}"}
      %select= options_for_select([1, 2, 3, 4, 5])
    %a(href='http://www.google.com') 
      Click Me
  .cell 
    = link_to "I have this", '#', :class => "button"
    = link_to "I want this", '#', :class => "button"

:javascript
  $(document).ready(function(){

    $.ui.autocomplete.prototype._renderItem = function( ul, item ) {
      var template = $('#product-autocomplete-result-template').html();
      var parsed_template = _.template(template, item);
      var target_option = 'value="' + item.rating + '"';    // do simple string replace to select option, as I can't get Jquery
      var selected_option = target_option + ' selected="selected"';
      var autocomplete_html = parsed_template.replace(target_option, selected_option);
      var returnVal = $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append('<a>' + autocomplete_html+'</a>')
        .appendTo( ul );
      $("#stars-wrapper-"+item.id).stars({ inputType: "select", disabled: true });
      return returnVal;
    };

    $('#product-search-input').autocomplete({
          delay: 50,
      source: function(request, response) {
        $.ajax({
          url: "#{search_products_path}",
          dataType: 'json',
          data: { term: request.term },
          success: function(data) {
            if (data.length < 1) {
              console.log("Juuusstt right");
              // show submit button
            } else {
              console.log("Too long");
              // hide submit button
            }
            response(data);
          }
        });
      },
      select: function( event, ui ) {
        console.log( ui.item ?
          "Selected: " + ui.item.label :
          "Nothing selected, input was " + this.value);
      }
   })
  });

我猜你已经找到了解决方案，但迟到总比不找到好。

我知道这不是最佳解决方案，但它确实有效。

$(".yourLink").live('click', function () {
    var yourLinkHref= $(this).attr('href');
    window.location = yourLinkHref;

});

希望能帮助到你 ：）