$(…).popover no es una función

5 minutos de lectura

avatar de usuario
serguei fedorov

He revisado bastantes publicaciones aquí relacionadas con este problema, pero ninguna de ellas parece resolver mi problema.

He importado los archivos jQuery y Bootstrap js en el orden correcto. Cosas como los paneles de arranque funcionan perfectamente bien para mí.

Mis importaciones de secuencias de comandos son así:

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

Sin embargo, cuando intento

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

Recibo el siguiente mensaje en la consola de Chrome:

 Uncaught TypeError: $(...).popover is not a function

Al principio pensé que tal vez el popover no estaba incluido en la copia de CDN, así que seguí adelante y descargué una copia local con todos los complementos incluidos desde aquí:

http://getbootstrap.com/customize/

y obtuve el mismo mensaje de error (volvió a señalar las etiquetas del script hacia el archivo js local).

Haciendo una búsqueda de “popover” en el archivo bootstrap.min.js:

http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js

Muestra que popover está incluido en el archivo.

  • ¿Hay varias instancias de jQuery?

    – Arun P Johny

    28 de abril de 2015 a las 5:15

  • Simplemente incluya su bootstrap js, elimine jquery e intente.

    – estrofa

    28 de abril de 2015 a las 5:18

  • @Tushar no, no lo haría. Si hubiera otro jQuery incluido después de Bootstrap JS, $ se estaría redefiniendo y $.fn.popover no existiría

    – Phil

    28 de abril de 2015 a las 5:27


  • @SergueiFedorov puedes intentarlo jQuery.fn.jquery en la consola de su navegador y verifique la versión que ha importado

    – Arun P Johny

    28 de abril de 2015 a las 5:33

  • Aquí también es donde algo como require.js puede ser útil, para asegurarse de obtener la versión correcta de una biblioteca, incluso si se carga varias veces.

    – redbmk

    28 de abril de 2015 a las 5:39

avatar de usuario
Arun P Johny

Dado que ha declarado que ha incluido jQuery y las otras bibliotecas correctamente, un caso posible es que podría haber varias instancias de jQuery en la página.

Entonces, según la tecnología del servidor utilizada, busque una versión duplicada de jQuery y, si hay alguna, elimínela (si no es necesario, tendrá que pensar en no conflicto() usar).

En el caso de instancias de jQuery duplicadas, el problema es que la versión de jQuery a la que está conectado el complemento puede ser diferente a la que está accediendo para usar el complemento en ese momento, no se encontrará el complemento.

  • Genial, para aquellos que usan AngularJS con popover.js, usen angular.element en vez de $

    – Siguiendo mi camino

    14 mayo 2017 a las 12:40

El orden de inclusión de bootstrap.js y jquery.js es importante. Incluya jquery.js ANTES de bootstrap.js

  • Esto debería ser un comentario sobre una respuesta o pregunta amigo. Te voté para que estés un poco más cerca del privilegio de ‘comentar’.

    – Rann Lifshitz

    22 de abril de 2018 a las 8:40

  • Esto me lo resolvió y también eliminó otro error que dice “Error de tipo no detectado: no se puede leer la propiedad ‘fn’ de indefinido” que solo se mostraba en la consola.

    – Diego Ricardo Valdivia Arreola

    14/06/2019 a las 14:50

  • Esto definitivamente califica para la respuesta ya que resolvió mi error. Gracias @Samir Kulkarni.

    – Murtuza K.

    18 de agosto de 2020 a las 18:53

Para Bootstrap 5 en adelante, así es como agrega el código de popovers para el botón:

<button type="button" class="btn btn-secondary mx-2" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">
      Your Cart(<span id="cart">0</span>)
      </button>

Guion:

<script type="text/javascript">
      var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
      var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
      return new bootstrap.Popover(popoverTriggerEl);
    });
    </script>

Tuve el mismo problema y verifiqué la versión de jquery. Pasar a v1.12 me ayudó

avatar de usuario
E.Tabaku

Lo que funcionó para mí fue hacer una llamada a $.noConflicto() que devolvió el control de $. Eso se debió a que algunas otras bibliotecas de JavaScript usan $ como función o nombre de variable, al igual que lo hace jQuery. Durante la inicialización de jQuery, hay algunas referencias antiguas de $ guardadas. noConflict() los restaura.

$noConflict();
jQuery(document).ready(function ($) {
$("#id").popover('hide');
});

  • ¿Dónde debo poner este código?

    – dapidmini

    5 de enero a las 8:20

  • @dapidmini Puede poner el código en uno de los scripts que usará para la página que usa popover. Si está escribiendo el script en una página HTML, solo tenga una función lista para documentos y dentro de ella el método popover.

    – E.Tabaku

    5 de enero a las 9:13

Suponiendo que haya agregado correctamente el script popover en su sitio.

Para arreglar el error “$(…).popover no es una función”. En algún momento, solo agregue un retraso del temporizador para solucionarlo.

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

modificar a

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

A veces (siempre) la página web no representa completamente el contenido y el POPOVER dará este error. Por lo tanto, necesitamos un retraso de 500 ms al iniciar el script emergente. A veces, 500 ms no son suficientes para esperar el renderizado, por lo que se pueden modificar más retrasos según sea necesario.

Incluso en bootstrap 5 también tiene este problema

Conclusión

El inicio del script POPOVER necesita esperar que la página completa se procese por completo.

  • ¿Dónde debo poner este código?

    – dapidmini

    5 de enero a las 8:20

  • @dapidmini Puede poner el código en uno de los scripts que usará para la página que usa popover. Si está escribiendo el script en una página HTML, solo tenga una función lista para documentos y dentro de ella el método popover.

    – E.Tabaku

    5 de enero a las 9:13

avatar de usuario
shrikantm1999

Esto sucede debido a una versión diferente de bootstrap. En este caso, use un script de la misma versión que su bootstrap.

En otro caso, no se recomienda jquery. en lugar de usar Advance Css Js

Esto también sucede porque el último arranque no funciona

  • Por favor revisa la ortografía de tu respuesta 🙂

    – Timo Reyman

    28 mayo 2021 a las 16:23

¿Ha sido útil esta solución?