对此已经存在疑问... 但关于 Bootstrap 3 的。
在the docs之后，为了使用Bootstrap 4显示弹出窗口，我执行了以下操作：
关于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不是 函数TypeError：$（...）。popover不是函数
和
datatables.min.js：14未捕获的TypeError：$（...）。popover不是 功能
以下是我正在显示的完整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> 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> 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> 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> 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> 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> 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> 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> 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> Mujeres</th>
<th><i class="fas fa-male"></i> Hombres</th>
<th><i class="fas fa-sliders-h"></i> 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> Editar</a>
<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> 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> Editar</a>
<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> 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> Listo. Pasar a la siguiente sección <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 Stackoverflow:
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');//https://stackoverflow.com/a/7838305/1883256
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"> Procesando ... Espere ... <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');//https://stackoverflow.com/a/7838305/1883256
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"> Vamos a la siguiente sección ... Espere ... <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');//https://stackoverflow.com/a/7838305/1883256
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"> Finalizando <i class="far fa-paper-plane"></i> ... Espere ... <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异常：$（...）。popover不是函数TypeError： $（...）。popover不是函数
在自定义的javascript部分内部，您可以看到
$('[data-toggle="popover"]').popover();
有人想在数据表中使用popover()函数时，是否知道如何解决此问题或任何变通方法，以避免这种冲突？
答案 0 :(得分：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永远不会被“引导”的原因。
由于您使用的是响应式扩展程序，并且您的弹出窗口已注入DOM中，因此，每次显示行的详细信息时，都必须（重新）启用弹出窗口：
$('#myTable').on('responsive-display.dt', function() {
$('#myTable tr [data-toggle="popover"]').popover()
})
现在您的代码应该可以工作了-> http://jsfiddle.net/z58Lg94k/