引入DataTables后Bootstrap Select无法下拉的问题求助

我之前也碰到过一模一样的问题！这大概率是DataTables和Bootstrap Select之间的事件绑定冲突导致的——尤其是click事件的冒泡被DataTables拦截了，所以点击按钮时没法正常触发下拉展开，但键盘事件的处理逻辑没被干扰，所以敲击按键能正常展开。

给你几个快速修复的方案，按顺序试试：

1. 调整JS加载顺序并在DataTables初始化后刷新Bootstrap Select #

DataTables初始化时可能会重新渲染DOM元素，导致Bootstrap Select的初始化状态失效。你可以把Bootstrap Select的JS放在DataTables之后加载，并且在DataTables的initComplete回调里手动刷新selectpicker：

<!-- 先加载DataTables的JS -->
<script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>
<script type="text/javascript" src="https://www.datatables.net/plug-ins/i18n/Dutch"></script>
<!-- 再加载Bootstrap Select的JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

然后初始化DataTables时加上回调：

$('#your-datatable-id').DataTable({
  // 你的DataTables配置项
  initComplete: function() {
    // 刷新所有selectpicker组件
    $('.selectpicker').selectpicker('refresh');
  }
});

2. 手动绑定click事件并阻止冒泡 #

如果上面的方法没用，可能是DataTables的事件处理阻止了click事件向上冒泡。你可以手动给Bootstrap Select的按钮绑定click事件，强制触发展开：

$(document).on('click', '.bootstrap-select .btn', function(e) {
  // 阻止事件冒泡到DataTables的父元素
  e.stopPropagation();
  // 手动切换下拉菜单状态
  $(this).closest('.bootstrap-select').find('.selectpicker').selectpicker('toggle');
});

3. 检查jQuery版本冲突 #

确认页面里只引入了一个jQuery版本，而且版本满足两者的要求：Bootstrap Select 1.12.4需要jQuery 1.9.1+，DataTables用的1.11.3是符合要求的，但如果页面里有其他jQuery实例（比如通过noConflict引入的），会导致事件绑定失效。

另外，你也可以试试更新Bootstrap Select到较新的版本（比如1.13.x），新版本可能修复了这类兼容性问题。

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