引导程序和 jQueryUI 冲突

Question

我正在尝试在同时引用 jQueryUI 和 Bootstrap 3 的视图上使用 tooltip。我制作了一个样本here。如果我在 jQueryUI 的 js 之后加载 Boostrap，那么 tooltip() 调用是成功的，但是如果我在 Bootstrap 之后调用 jQueryUI，那么我会收到一个错误并且没有任何效果。你可以自己试试。网上有很多关于这个的讨论，我在 GitHub 上四处询问，但我还没有找到解决方案。

Answer 1

最简单的解决方案是先放jquery-ui.js，然后放bootstrap-datepicker.js 这对我有用。

Answer 2

不包括 jquery-ui.js，而是根据需要包括各个库并省略 jquery-ui 工具提示。

例如，如果您只需要 jquery-ui 可排序，则使用此：

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/ui/core.js"></script>
<script src="bower_components/jquery-ui/ui/widget.js"></script>
<script src="bower_components/jquery-ui/ui/mouse.js"></script>
<script src="bower_components/jquery-ui/ui/sortable.js"></script>

Answer 3

理想的解决方案是使用不带工具提示的 QueryUI。这将起作用。如果您不想这样做，请在 JQueryUI 之后包含 Bootstrap。确保每个组件都有独特的组件（您可以使用所需组件自定义构建两个库）

Bootstrap 可以重置任何组件，例如：

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

上面的代码在 JQueryUI 之后加载 bootstrap 时会起作用

参考：http://getbootstrap.com/javascript/

这是来自 Bootstrap 的相关代码：

  var old = $.fn.tooltip

  $.fn.tooltip = function (option) {
    ....
  }


  $.fn.tooltip.noConflict = function () {
    $.fn.tooltip = old
    return this
  }