小贝子编程

引导程序 4 弹出框由于错误弹出窗口而不起作用，这不是与数据表的函数冲突



已经有关于这个的问题了...但关于引导 3。

按照文档，为了使用 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()
})

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

datatables.min.js：14 jQuery.Deferred exception： $(...(.弹出框不是 函数类型错误： $(...(。弹出框不是一个函数

和

datatables.min.js：14 uncatch TypeError： $(...(.弹出框不是 功能

以下是我显示的完整 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 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">&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');//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">&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');//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">&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： $(...(.弹出框不是函数类型错误： $(...).弹出框不是一个函数

在你看到的在线上，在自定义的javascript部分：

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

有没有人知道如何解决此问题或任何解决方法，以避免在想要将popover()函数与数据表一起使用时发生此类冲突？

嗯，这很棘手，直到我注意到你使用了DataTables的CDN下载和捆绑页面。并且您已经合并了绝对所有内容 - 包括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/

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium