试图停止 Select2 multi-select 选项删除的事件传播

Question

我的 UI 有一些从 Bootstrap 创建的下拉菜单，我用它来包含一些表单元素。我用我在这里找到的解决方案阻止下拉菜单关闭，这几乎是完美的： Avoid dropdown menu close on click inside

剩下的问题是我使用 Select2 多个 select 和删除选项的特定实例。删除操作似乎遵循不同的事件链，因为它关闭了下拉列表。我的假设是该事件正在传播到父元素，但我似乎无法确定是哪一个。

这里有一个JSFiddle来说明这个问题。 Select 一个选项，然后删除它看看会发生什么。下面是包含 jsfiddle 时所需的代码。当然，它从我的实际代码中删减了，但至少代表了问题。

$('body').on('click', '.dropdown .cycle-element', function(e) {
  $(this).parent().toggleClass('open');
});

$('body').on('click', function(e) {
  if (!$('.dropdown').is(e.target) && $('.dropdown').has(e.target).length === 0 && $('.open').has(e.target).length === 0) {
    $('.dropdown').removeClass('open');
  }
});

$('.dependency-select').select2();

Answer 1

@TheGremlyn 这是你能做的。我还没有完全测试它，但乍一看，当 div 关闭时关闭 select2 似乎是解决方案。

您可以如下关闭select2。

$('.dependency-select').select2('close');

这是更新后的代码。看看这个。 https://jsfiddle.net/c1ef7138

Answer 2

我们运行陷入了基本相同的问题。根本问题是，当使用 select2 多选时，当您删除选项时触发的取消选择事件会传播并最终关闭 bootstrap 下拉列表。

处理此问题的简单方法是侦听事件并停止传播

$('your-select').on("select2:unselect", function(e) {
  if (!e.params.originalEvent) {
    return
  }

  e.params.originalEvent.stopPropagation();
});

试图停止 Select2 multi-select 选项删除的事件传播

Trying to stop event propagation of Select2 multi-select option remove

jquery

twitter-bootstrap

jquery-select2