jquery ui autocomplete _renderItem似乎干扰了select事件

如果我使用_renderItem，则我的select事件不起作用。 如果我注释掉我调用_renderItem的最后一段代码，则select事件有效。 当我使用_renderItem时，select事件根本不会触发。

var cache = {}, lastXhr; $("#hifind-find").autocomplete({ source: function(request, response) { var term = request.term; if (term in cache) { response(cache[term]); return; } var posturl = '/hifind/jquery_ui/autocomplete/'+term; lastXhr = $.post(posturl, function(data, status, xhr) { cache[term] = data; if (xhr === lastXhr) { response(data); } }, 'json'); }, delay: 300, minLength: 1, select: function(event, ui){ window.location = ui.item.dest; } }); $.ui.autocomplete.prototype._renderItem = function(ul, item) { return $("
") .data("item.autocomplete", item) .append('' + item.label ) .appendTo( ul ); }; 

如果我做类似的话，我会得到相同的结果……

 $("#hifind-find").autocomplete(myConfig).data("autocomplete")._renderItem = renderItemFunction; 

无论哪种方式，选择都不会触发。 _renderItem做它应该做的事情。 它修改了项目并且没有错误，但似乎打破了选择。

Answer 1

我相信这是因为你没有将项目包装在一个锚（ a ）标签中。 更新你的代码以将img包装在一个锚中它会正常工作：

 $.ui.autocomplete.prototype._renderItem = function(ul, item) { return $("
") .data("item.autocomplete", item) .append('' + item.label + '') .appendTo( ul ); }; 

以下是一些可能有用的示例：

• 在_renderItem生成a标记中没有包含标记的_renderItem （ select在这里像你的问题一样被破坏）： http ： //jsfiddle.net/MaLqe/

• 生成的标记中带有 a标记的示例： http ： //jsfiddle.net/3zSMG/