点击li事件不起作用

Question

你好，我正在使用li和输入文本框创建一个搜索框。

当搜索结果被点击时，我想要加载一个页面。

搜索结果以li的形式呈现，我绑定了以下点击事件，但是它并没有触发。

以下是绑定点击事件的代码：

$("li").click(function(){
    alert("HI");
    alert($(this).text());
    return false;
});

请查看JS Fiddle获取更多详细信息： 请访问http://jsfiddle.net/amitsant/2zhk209v/3/。

- santify

---

$ 是 jQuery，在那个 fiddle 中你没有加载 jQuery... - Aidan Kane

由于您正在显示和隐藏搜索框的焦点/模糊 ul，因此在单击 li 元素之前，列表将自动隐藏（请参见此处的更新版本 http://jsfiddle.net/2zhk209v/5/）。 - ingo

你从你的JavaScript中删除了第一行，这行代码可能是jQuery(function ($) {。不过你应该还有一个闭合的})。 - manishie

我更新了jsfiddle，包括JSFiddle javascript的第一行代码...在JSFiddle中不需要加载jQuery，我猜它会自动链接JQuery和JQuery UI... - santify

@ingo：我之前实现的搜索功能是否可以与点击事件配合使用？ - santify

这会导致故障 display => .search .results { display: none;.... - alessandrio

Answer 1

只需监听mousedown事件而不是click事件。原因是click事件会等待mouseup事件触发，但由于blur事件先于它，导致面板被隐藏时mouseup事件无法触发。

$("li").mousedown(function(){
...

Working fiddle: http://jsfiddle.net/3umj3fup/

- ariel