Tengo un signo de interrogación "Font Awesome" en mi página web. Cuando el usuario se desplaza sobre él, aparece una ventana emergente a través de javascript. Lo que es extraño (para mí) es que, dado que el código javascript está DESPUÉS de mi código html, funciona bien.
Esto funciona
<div class="margin-top-sm">Enter email: <span class="fa fa-question-circle text--secondary pop" data-container="body" data-toggle="popover" data-placement="right" data-content="My popover text"></span></div> <script type="text/javascript"> $(".pop").popover({ trigger: "manual", html: true, animation: false }) .on("mouseenter", function () { var _this = this; $(this).popover("show"); $(".popover").on("mouseleave", function () { $(_this).popover('hide'); }); }).on("mouseleave", function () { var _this = this; setTimeout(function () { if (!$(".popover:hover").length) { $(_this).popover("hide"); } }, 300); }); </script>Sin embargo, si coloco mi javascript ARRIBA del html, no funciona.
esto no funciona
<script type="text/javascript"> $(".pop").popover({ trigger: "manual", html: true, animation: false }) .on("mouseenter", function () { var _this = this; $(this).popover("show"); $(".popover").on("mouseleave", function () { $(_this).popover('hide'); }); }).on("mouseleave", function () { var _this = this; setTimeout(function () { if (!$(".popover:hover").length) { $(_this).popover("hide"); } }, 300); }); </script> <div class="margin-top-sm">Enter email: <span class="fa fa-question-circle text--secondary pop" data-container="body" data-toggle="popover" data-placement="right" data-content="My popover text"></span></div> Solo pregunto porque este es un sitio web de mvc y me gustaría lanzar mi javascript dentro de las etiquetas @section de "Script". Mi sección "Script" está en la parte superior de la página en mi sección <head> .
Entonces, de todos modos, solo por curiosidad, ¿por qué sucede esto?
Gracias
La posición en la que coloca la etiqueta del script es realmente importante y puede afectar su código como acaba de experimentar. Los navegadores se comportan de la forma en que analizan el HTML de arriba a abajo, por lo que los elementos se agregan al DOM y los scripts se ejecutan como cuando se encuentran, lo que significa que el orden en que coloca los elementos y las etiquetas es importante. los scripts no podrán encontrar elementos ni manipularlos si aparecen más tarde en el código html de marcado porque esos elementos aún no se han agregado al DOM.
Analicemos lo que sucede cuando un navegador carga un sitio web con una determinada etiqueta de secuencia de comandos:
script que hace referencia a un archivo de script externo y solicita ese archivo. Mientras tanto, el analizador se bloquea (a menos que exista la palabra clave async o defer) y deja de analizar el resto del HTML. Entonces, en el paso 4, dado que el analizador aún no analizó el documento HTML, no podrá trabajar con el resto del HTML y es por eso que su etiqueta de secuencia de script debe ubicarse en la parte inferior.