Bootstrap 4 popover not working because of error popover is not a function conflict with datatables 问题

Question

已经有关于此的问题...但是关于Bootstrap 3。

为了使用 Bootstrap 4 显示弹出窗口，请关注 the docs 我已完成以下操作：

至于CSS，我加了

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

关于JS，我补充说：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

然后，当我尝试如下所示的按钮示例时

<button type="button" class="btn btn-secondary btn-sm" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                                            Popover on top
                                        </button>

没有任何反应。好的，在文档的某处它说我们可以在 javascript:

中启用它们

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

确实有效。但是，我碰巧在同一视图中使用 datatables，因此，当我添加数据表 js 时，我同时收到以下警告和错误：

datatables.min.js:14 jQuery.Deferred exception: $(...).popover is not a function TypeError: $(...).popover is not a function

和

datatables.min.js:14 Uncaught TypeError: $(...).popover is not a function

这是我正在显示的完整 HTML 代码：

<!doctype html>
<html lang="es">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="shortcut icon" href="/images/logo-web7.png">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">



    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/af-2.3.0/b-1.5.2/b-colvis-1.5.2/b-html5-1.5.2/b-print-1.5.2/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.4.0/r-2.2.2/rg-1.0.3/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.css"/>    <title>Awesome title</title>
</head>
<body>

<div class="container">

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="http://encuesta.local:8000">Project name</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">

            <li class="nav-item">
                <a class="nav-link" href="http://encuesta.local:8000/academicos/encuesta/inicio/MrpsL"><i class="fas fa-home"></i>&nbsp;Inicio</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://encuesta.local:8000/academicos/encuesta/domicilio/MrpsL"><i class="fas fa-address-card"></i>&nbsp;Domicilio</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://encuesta.local:8000/academicos/encuesta/contacto/MrpsL"><i class="far fa-user-circle"></i>&nbsp;Contacto</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://encuesta.local:8000/academicos/encuesta/producto/MrpsL"><i class="fas fa-project-diagram"></i>&nbsp;Productos</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="http://encuesta.local:8000/academicos/encuesta/docencia/MrpsL"><i class="fas fa-graduation-cap"></i>&nbsp;Docencia</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://encuesta.local:8000/academicos/encuesta/tesis/MrpsL"><i class="fas fa-book"></i>&nbsp;Tesis</a>
            </li>
        </ul>
        <ul class="nav navbar-nav justify-content-end ml-auto">
            <li class="nav-item navbar-right">
                <a class="nav-link" href="#"><i class="fas fa-user-circle"></i>&nbsp;Here goes the user name</a>
            </li>
        </ul>
    </div>
</nav>


        <div class="row">
        <div class="col">

            <a type="button" class="btn btn-primary" href="http://encuesta.local:8000/academicos/encuesta/docencia/asignatura/nueva/MrpsL" role="button" id="boton"><i class="fas fa-plus-circle"></i>&nbsp;Nuevo registro de asignatura</a>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-body">
                                            <p class="h3">Listado asignaturas reportadas</p>
                        <table class="display table table-bordered table-striped table-hover table-responsive" id="myTable" style="width: 100%">
                            <thead>
                            <tr>
                                <th>Asignatura</th>
                                <th>Tipo Institución</th>
                                <th>Institución</th>
                                <th>Nivel</th>
                                <th>Programa / Carrera</th>
                                <th><i class="fas fa-female"></i>&nbsp;Mujeres</th>
                                <th><i class="fas fa-male"></i>&nbsp;Hombres</th>
                                <th><i class="fas fa-sliders-h"></i>&nbsp;Acciones</th>
                                <th>Ciclo</th>
                                <th>Horas / semana</th>
                                <th>Horas efectivas</th>
                            </tr>
                            </thead>
                            <tbody>
                                                            <tr>
                                    <td>Antropología social</td>
                                    <td>
                                        NAC
                                                                            </td>

                                    <td>
                                                                                    Escuela Nacional de Antropología e Historia
                                                                            </td>

                                    <td>LIC</td>

                                    <td>
                                                                                    Antropología Social
                                                                            </td>

                                    <td>29</td>
                                    <td>13</td>
                                    <td>
                                        <a class="btn btn-info btn-sm" href="http://encuesta.local:8000/academicos/encuesta/docencia/asignatura/editar/16/MrpsL" role="button"><i class="fas fa-edit"></i>&nbsp;Editar</a>&nbsp;
                                        <a class="btn btn-danger btn-sm" href="http://encuesta.local:8000/academicos/encuesta/docencia/asignatura/borrar/16/MrpsL" id="eliminar" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="Testing the POPOVER HERE"><i class="fas fa-trash-alt"></i>&nbsp;Eliminar</a>
                                        <button type="button" class="btn btn-sm btn-primary" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
                                    </td>

                                    <td>SEM</td>
                                    <td>2</td>
                                    <td>35</td>
                                </tr>
                                                            <tr>
                                    <td>Filosofía Política</td>
                                    <td>
                                        NAC
                                                                            </td>

                                    <td>
                                                                                    Academia Mexicana de Economía Política
                                                                            </td>

                                    <td>MTR</td>

                                    <td>
                                                                                    Ciencias Políticas
                                                                            </td>

                                    <td>22</td>
                                    <td>9</td>
                                    <td>
                                        <a class="btn btn-info btn-sm" href="http://encuesta.local:8000/academicos/encuesta/docencia/asignatura/editar/17/MrpsL" role="button"><i class="fas fa-edit"></i>&nbsp;Editar</a>&nbsp;
                                        <a class="btn btn-danger btn-sm" href="http://encuesta.local:8000/academicos/encuesta/docencia/asignatura/borrar/17/MrpsL" id="eliminar" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="Testing the POPOVER HERE"><i class="fas fa-trash-alt"></i>&nbsp;Eliminar</a>
                                        <button type="button" class="btn btn-sm btn-primary" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
                                    </td>

                                    <td>SEM</td>
                                    <td>3</td>
                                    <td>25</td>
                                </tr>
                                                        </tbody>
                        </table>
                                    </div>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col">
            <a class="btn btn-success" href="http://encuesta.local:8000/academicos/encuesta/tesis/MrpsL" role="button" id="siguiente"><i class="fas fa-clipboard-check"></i>&nbsp;Listo. Pasar a la siguiente sección&nbsp;<i class="fas fa-arrow-right"></i></a>
        </div>
    </div>

    <!-- Footer -->
<footer class="page-footer font-small bg-dark pt-4 text-white">

    <!-- Footer Links -->
    <div class="container text-center text-md-left">



        <!-- Grid row -->
        <div class="row d-flex align-items-center">

            <!-- Grid column -->
            <div class="col-lg">

                <!--Copyright-->
                <p class="text-center text-md-center">© 2018 Whosebug:
                    The awesome footer text goes here ☺
                </p>

            </div>
            <!-- Grid column -->

            </div>
            <!-- Grid column -->

        </div>
        <!-- Grid row -->

    </div>
    <!-- Footer Links -->

</footer>
<!-- Footer --></div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<script>
    $(document).ready(function(){
        <!-- Cambiar el texto con javascript, cuando se le ha hecho clic -->
        /* Cambiar el texto del botón de actualizar */
        $('#boton').click(function() {
            var id = $(this).attr('id');//
            button_message(id);
        });

        function button_message(selector){
            var img_route = "/images/ajax-loader2.gif";
            $('#'+selector).addClass("disabled").html('<img src="'+img_route+'" style="float:left;margin-right:0.5em;" height="21" width="21">&nbsp;&nbsp;Procesando ... Espere ...&nbsp;<i class="fas fa-database"></i>');
            $(this).parents('form').submit();
        }
    });
</script><script>
    $(document).ready(function(){
        <!-- Cambiar el texto con javascript, cuando se le ha hecho clic -->
        /* Cambiar el texto del botón de actualizar */
        $('#siguiente').click(function() {
            var id = $(this).attr('id');//
            button_message(id);
        });

        function button_message(selector){
            var img_route = "/images/ajax-loader2.gif";
            $('#'+selector).addClass("disabled").html('<img src="'+img_route+'" style="float:left;margin-right:0.5em;" height="21" width="21">&nbsp;&nbsp;Vamos a la siguiente sección ... Espere ...&nbsp;<i class="fas fa-database"></i>');
            $(this).parents('form').submit();
        }
    });
</script><script>
    $(document).ready(function(){
        <!-- Cambiar el texto con javascript, cuando se le ha hecho clic -->
        /* Cambiar el texto del botón de actualizar */
        $('#finalizar_encuesta').click(function() {
            var id = $(this).attr('id');//
            button_message(id);
        });

        function button_message(selector){
            var img_route = "/images/ajax-loader2.gif";
            $('#'+selector).addClass("disabled").html('<img src="'+img_route+'" style="float:left;margin-right:0.5em;" height="21" width="21">&nbsp;&nbsp;Finalizando&nbsp;<i class="far fa-paper-plane"></i>&nbsp;... Espere ...&nbsp;<i class="fas fa-database"></i>');
            $(this).parents('form').submit();
        }
    });
</script>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jq-3.3.1/jszip-2.5.0/dt-1.10.18/af-2.3.0/b-1.5.2/b-colvis-1.5.2/b-html5-1.5.2/b-print-1.5.2/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.4.0/r-2.2.2/rg-1.0.3/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.js"></script>
    <script>

        $(document).ready(function () {
            $('[data-toggle="popover"]').popover();
            //$('[data-toggle="tooltip"]').tooltip();
            var table = $('#myTable').DataTable({
                responsive: true,
                buttons: [
                    'copy', 'excel', 'pdf'
                ],
                language: {
  "sProcessing": "Procesando...",
  "sLengthMenu": "Mostrar _MENU_ registros",
  "sZeroRecords": "No se encontraron resultados",
  "sEmptyTable": "Ningún dato disponible en esta tabla",
  "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
  "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
  "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
  "sInfoPostFix": "",
  "sSearch": "Buscar:",
  "sUrl": "",
  "sInfoThousands": ",",
  "sLoadingRecords": "Cargando...",
  "oPaginate": {
    "sFirst": "Primero",
    "sLast": "Último",
    "sNext": "Siguiente",
    "sPrevious": "Anterior"
  },
  "oAria": {
    "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
    "sSortDescending": ": Activar para ordenar la columna de manera descendente"
  }
},
        });

            /*Checar: http://jsfiddle.net/2x8nb93u/*/

        table.buttons().container()
            .appendTo( $('.table', table.table().container() ) );
    });

    </script>
</body>
</html>
</body>

错误是：

jQuery.Deferred exception: $(...).popover is not a function TypeError: $(...).popover is not a function

在线你看到的地方，在定制的javascript部分里面：

$('[data-toggle="popover"]').popover();

有人知道如何解决这个问题或任何解决方法来避免在想要将 popover() 函数与数据表一起使用时发生这种冲突吗？

Answer 1

好吧，这很棘手，直到我注意到您使用了 DataTables 的 CDN download and bundling 页面。并且您已经完全整合了所有内容 - 包括 jQuery 3.3.1。那真的把事情搞砸了。这是没有 jQuery 的相同捆绑：

https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/af-2.3.0/b-1.5.2/b-colvis-1.5.2/b-html5-1.5.2/b-print-1.5.2/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.4.0/r-2.2.2/rg-1.0.3/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.css
https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/af-2.3.0/b-1.5.2/b-colvis-1.5.2/b-html5-1.5.2/b-print-1.5.2/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.4.0/r-2.2.2/rg-1.0.3/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.js

这就解释了为什么错误似乎源自 DataTables 中的某些东西，它是隐藏在其中的额外 jQuery 永远不会变成 "bootstrapped"。

由于您使用的是响应式扩展 - 并且您的弹出窗口被注入 DOM - 每次显示一行的详细信息时，您必须（重新）启用弹出窗口：

$('#myTable').on('responsive-display.dt', function() {
  $('#myTable tr [data-toggle="popover"]').popover()
})

现在您的代码应该可以工作了 -> http://jsfiddle.net/z58Lg94k/

Bootstrap 4 popover not working because of error popover is not a function conflict with datatables 问题

Bootstrap 4 popover not working because of error popover is not a function conflict with datatables

jquery

datatables

bootstrap-4

bootstrap-popover