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

Question

我的UI有一些从Bootstrap创建的下拉列表,我用它来包含一些表单元素.我通过我在这里找到的解决方案阻止了下拉关闭,这几乎是完美的: 避免下拉菜单关闭内部点击

剩下的问题是我使用Select2 mutliple选择并删除选项的特定实例.删除行为似乎遵循不同的事件链,因为它关闭了下拉列表.我的假设是事件传播到父元素,但我似乎无法确定哪个.

这是一个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 multiselect时,删除选项时触发的取消选择事件会传播并最终关闭引导下拉列表.

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

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

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