jQuery Chosen Plugin：在切换时捕获焦点以打开

Question

我们目前正在使用Chosen Dropdown Plugin，这非常棒，除了一个小问题。当我们使用单个下拉菜单时，如果您选择“选择”控件，则不会显示实际的下拉菜单部分。但是，将插件应用于多个“选择”时，它确实会出现。

通过文档和 GitHub 问题，似乎有很多关于选项卡顺序和焦点的提及，但似乎没有任何内容涉及这个相当简单的要求；选项卡时接收焦点时显示下拉列表。

那么假设这个功能不是插件的一部分，是否有替代方案，例如捕获锚标记的焦点？

$('.chzn-single').focus(function(e){
    alert('I should be focused!')
});    

到目前为止，我还没有成功，想知道是否有其他人遇到过这个问题。你可以看看这个jsfiddle 来演示这个问题

Answer 1

1. 您应该跟踪所选容器内的搜索输入的焦点事件，而不是锚元素，然后为所选容器触发 mousedown 事件 - 这是它在打开下拉列表时侦听的事件

2. 您需要使用委托事件方法将事件处理程序绑定到动态添加的元素（对于 jquery 1.7.1 及更早版本，您可以只使用 'live' 方法）

3. You also need to check if the container is active currently, to avoid recursive calls (when chosen dropdown gets opened - search input will be focused again)

$('body').on('focus', '.chzn-container-single input', function() { if (!$(this).closest('.chzn-container').hasClass('chzn-container-active')) $(this).closest('.chzn-container').trigger('mousedown'); //或者改用这个 //$('#select').trigger('listzt:open'); });

这是工作jsfiddle

而不是$(this).closest('.chzn-container').trigger('mousedown'); 你也可以触发插件的内部事件：$('#select').trigger('liszt:open');