jquery绑定逻辑与事件执行

Question

功能：做一个菜单加输入框，用于搜索菜单内容，显示匹配选项，非匹配隐藏，点击匹配选项，进入后续点击事件处理。

$('.keywordQuery').on('change keyup', function(e){...}

出现现象：输入文字后显示匹配选项，但是点击匹配选项第一次，点击事件不执行，第二次以及之后正常进入点击事件。或者先点击其他元素/点击控制台/浏览器切后台再切前台，之后再点击匹配选项才能正常进入点击事件。

检查点击事件没有问题，以为是焦点问题，焦点定位到其他元素或者直接让一个元素执行点击事件都没有效果。怀疑时间冒泡和时间委托问题，修改一轮没有效果。代码增加document.on('click', function(e){console.log(e.target)})查看是否点击到了目标元素，发现没有。

后来把代码改成
$('.keywordQuery').on('input keyup', function(e){...（用于筛选匹配选项）}
正常运行。想不通，筛选匹配选项的方法正常执行。change要失焦才改变值，我只是显隐选项，跟值是否改变无关吧？

问题：元素确实存在于document中，监听的点击事件没有问题，然而点击不触发点击事件，是什么原因

Answer 1

虽然描述的很仔细,但还是木有明白你想表达的意思

一图胜千言万语,直接贴个在线示例代码吧

Answer 2

恩 ... change 和 input 都是变更输入值就触发的没有焦点事件的关系 ...
然后我没找到 JQ 有 input 事件，

要不只用 keyup 或者 change 试试 ？
你的 selector 是到 input 为止的吗？
最好 html 代码贴一下 ...
方便的话检查一下元素定位，就是 Element 里面那个盒模型，
逐级检查一下是不是 CSS 导致的，譬如按钮位移导致没点击成功？