Select2 上的模糊经常被触发答案

【问题标题】：Blur on Select2 is fired to oftenSelect2 上的模糊经常被触发
【发布时间】：2013-08-28 06:00:38
【问题描述】：

我正在实现一个 Select2，当我想要保存所选项目的字段失去焦点时，用户应该能够选择多个项目。我尝试使用 select2-blur 事件，但它经常被触发。一旦选择了一个选项，它就会触发。 select2 是用以下方式创建的：

$(test).select2({
  data:[
    {id:0,text:"Item 1"},
    {id:1,text:"Item 2"},
    {id:2,text:"Item 3"},
    {id:3,text:"Item 4"},
    {id:4,text:"Intem 5"}
  ],
  multiple: true,
  width: "300px"
});

$(test).on("select2-blur", function(e) { doStuffOnLostFocus();});

我创建了一个小提琴，您可以在其中看到多次触发模糊事件，而不是在 select2 控件上失去焦点时：http://jsfiddle.net/Wp8Wf/

只有当用户离开 select2 时，任何人都有一些关于如何做事的好主意？

【问题讨论】：

标签： jquery jquery-select2

【解决方案1】：

该插件具有自定义事件，因此无法“捕获”blur 事件，因为它会在向选择添加元素以及打开/关闭选项下拉菜单时创建自己的事件。

这是一个可行的解决方法，但需要根据您可能拥有的其余代码进行微调。

我发现了一个类.select2-container-active，它只在select2 被聚焦时才存在。但是这个class 在每个新的选择中来来去去。所以我所做的是等待select2 代码工作的setTimeout。如果class 仍然存在，那么它仍然集中在select2 中。如果class 不再存在，它会认为这是一个“正常”blur 并运行日志功能。这会造成一点延迟，但 select2 是罪魁祸首 :)

test.on("select2-blur", function (e) {
    setTimeout(function () {
        var active = $('#s2id_test').hasClass('select2-container-active');
        if (active) {
            return false;
        }
        log("Blur");
    }, 300);
});

Fiddle

【讨论】：

【解决方案2】：

这是旧的，但最新版本的 select2 有一个完整的 set of events 可以收听。没有模糊，但有select2:close，它非常接近模糊事件。

$('#my_id').on('select2:close', event => doStuffOnLostFocus(event));

【讨论】：