jQuery Select2插件下拉框没有响应鼠标点击

Question

我使用select2 jQuery插件和ajax调用来检索用户键入的下拉列表项目。允许多选（标签）并允许自定义选择。当下拉列表出现时，如果我使用光标键转到我想要的项目并按Enter或Tab，那么一切正常。 select2-selecting回调被触发并且输入被选择文本更新。

但是，如果我用鼠标单击某个选项，则不会触发select2-selecting回调，并且输入不会更新。发生的唯一情况是下拉菜单消失，没有别的。

我在同一页面上有另一个select2输入，只允许一个选择并且没有自定义选择。点击下拉项目的工作正常。插件网站上的示例与我所做的相似，也会对点击做出响应，所以它不是插件的一般错误。

我知道select2实际上有一个隐藏的，完全半透明的容器div，当select2输入有焦点时，添加到DOM的屏幕大小。 select2输入位于“底层”之上，其他所有内容都位于底层之下。当select2输入失去焦点时，“底层”消失。我认为这个问题可能是底层的z-index比输入更高，所以当我点击一个下拉项时，我实际上只是单击底层并导致输入失去焦点。那么，输入（9999）确实比底层（9998）具有更高的Z-索引。我只是想排除这一点。

Answer 1

Javascript代码是罪魁祸首：

input.on("select2-blur", function() { 
    $(this).select2('close'); 
}); 

我认为，在一个阶段，如果我标签了输入的下拉菜单只消失了，但如果我点击输入之外，当下拉是可见的，它留在那里。当我输入失去焦点时，我有这种方式可以摆脱下拉菜单。不过这是问题的原因。奇怪的是，即使我现在已经删除它，但当我在输入框外单击时，下拉框会正常消失，但我不知道它是什么。