jquery - 尝试停止 Select2 多选选项删除的事件传播

Question

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

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

这是一个JSFiddle来说明问题。选择一个选项，然后将其删除以查看会发生什么。下面是包含 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

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

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

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

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