如何避免 JQuery 与其他库冲突答案

【问题标题】：How to avoid JQuery conflict with other library如何避免 JQuery 与其他库冲突
【发布时间】：2021-05-27 23:37:03
【问题描述】：

我目前在我的 Laravel 8 项目中使用 Core Ui Admin Template。

在Core Ui的安装部分需要这些脚本。

script src="https://unpkg.com/@popperjs/core@2"
script src= "https://unpkg.com/@coreui/coreui/dist/js/coreui.min.js"

我也想使用Bootstrap's Tooltip。我需要添加一个脚本来启用它。

var $ = jQuery.noConflict();

$(window).on('load', function() { 
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
});

我的问题是它不起作用。我必须省略 coreui.min.js 脚本 才能正常工作。这个问题的任何提示？ TIA。

【问题讨论】：

标签： jquery core-ui

【解决方案1】：

这行得通

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
  return new coreui.Tooltip(tooltipTriggerEl)
})

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.0/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/@coreui/coreui@3.4.0/dist/js/coreui.bundle.min.js"></script>
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

【讨论】：

成功了！我还尝试使用 coreui.bundle.js 包含 popper.min.js，它们都工作得很好。谢谢！
很高兴为您提供帮助。