JQuery 和 Bootstrap 4 弹出框冲突？答案

【问题标题】：JQuery & Bootstrap 4 Popover Conflict?JQuery 和 Bootstrap 4 弹出框冲突？
【发布时间】：2018-09-23 09:03:39
【问题描述】：

我想知道 JQuery 和 Boostrap 4 的弹出框之间是否存在冲突。当尝试添加弹出框并加载页面时，当我单击按钮元素时没有显示任何内容。请参阅下面的代码示例：

<link href='https://use.fontawesome.com/releases/v5.0.10/css/all.css' rel='stylesheet'>
<link href='/css/fullcalendar.min.css' rel='stylesheet' />
<link href='/css/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css' />

<script src='/js/lib/moment.min.js'></script>
<script src='/js/lib/jquery.min.js'></script>
<script src='/js/fullcalendar.min.js'></script>
<script src='/js/gcal.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js'></script>

$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});

        <div class="fc-right">
            <div class="btn-group">
                <button class="btn btn-primary" title="My Popover" data-toggle="popover" data-trigger="focus" data-placement="top" data-content="My popover content">?</button>
            </div>
        </div>

在弹出框脚本上方添加以下 noConflict 代码似乎也不起作用：

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

$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});

任何助手都将不胜感激。

【问题讨论】：

你能做一个小提琴吗？
嗨，Smit，感谢您的回复和指点。我现在已经设法解决了这个问题。

标签： javascript jquery bootstrap-4 popover

【解决方案1】：

在 Smit 的帮助下，我设法通过简化和使用以下小提琴解决了这个问题：

https://jsfiddle.net/ridgedale/xpbynn9w/#&togetherjs=80xVyj4TRc

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />

<link href='https://use.fontawesome.com/releases/v5.0.10/css/all.css' rel='stylesheet'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.print.min.css
' rel='stylesheet' media='print' />
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css' />

<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/locale/en-gb.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/gcal.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js'></script>

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});
</script>

</head>
<body>
    <div id='cal-filters' class="fc-toolbar fc-header-toolbar">
        <div class="fc-left">
            <div class="btn-group">
                <button class="btn btn-primary asl-events">Btn1</button>
                <button type="button" class="btn btn-primary hnu-events">Btn2</button>
                <button type="button" class="btn btn-primary hps-events">Btn3</button>
            </div>
        </div>
        <div class="fc-right">
            <div class="btn-group">
                <button class="btn btn-primary" id="btnPopover" 
                    title="Help List"
                    data-content="Help information"
                    data-trigger="click"
                    data-toggle="popover">Help</button>
            </div>
        </div>
        <div class="fc-clear"></div>
    <hr />
    </div>
    
</body>

</html>

【讨论】：