select2下拉框点击新增按钮后不关闭且遮挡modal问题求助

解决方案 #

你之前尝试的blur、change事件都不是Select2官方提供的控制下拉关闭的方法，且触发事件的对象是Select2渲染出来的外层类元素，不是绑定Select2实例的原始<select>元素，因此无法生效，直接调用Select2封装的closeAPI即可解决问题。

方案1：直接修改CreateLegalEntity函数（优先使用，改造成本最低） #

在打开模态框的代码前加入关闭Select2下拉的逻辑，修改后的代码如下：

function CreateLegalEntity() {
   // 关闭指定Select2的下拉框，选择绑定实例的原始元素#subFundSelection
   $('#subFundSelection').select2('close');
   $('#CreateLegalEntityModal').modal('show');
}

可选补充：避免事件冒泡干扰（方案1生效可忽略） #

如果调用close后依然偶发不关闭的问题，是因为按钮点击事件冒泡到了Select2的父容器，阻止了关闭逻辑执行，可以调整为事件绑定写法同时阻止冒泡：

1. 修改select2初始化时添加按钮的代码，去掉行内onClick属性：

.on('select2:open', () => {
    $(".select2-results:not(:has(button))").append('<button id="newPersonButton" style="width: 100%" type="button" class="btn btn-primary">+ Add a new person</button>')
})

2. 单独绑定按钮点击事件：

$(document).on('click', '#newPersonButton', function(e) {
    e.stopPropagation(); // 阻止事件冒泡到Select2容器
    $('#subFundSelection').select2('close');
    $('#CreateLegalEntityModal').modal('show');
})

内容的提问来源于stack exchange，提问作者Chris Tsag