Question

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

        <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>

＆＃13;

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

＆＃13;

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();   
});

＆＃13;

任何助理都将不胜感激。

Answer 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>

JQuery＆amp; Bootstrap 4 Popover Conflict？

1 个答案: