El siguiente Jquery no se ejecuta dentro de mi navegador a pesar de que la sintaxis es correcta (verificada a través del verificador de sintaxis en línea) y las funciones se ejecutan (probadas con JS puro). ¿Por qué es eso así?

Me disculpo de antemano si la respuesta a esta pregunta es bastante simple, pero después de 15 minutos de búsqueda en Google no pude llegar a una respuesta.

JAVASCRIPT:

document.getElementById('overlay').addEventListener('click', function( {
    closeLightBox()
});

function closeLightBox() {
    $("#overlay").fadeOut(1000);
}

function lightbox(x) {

}

HTML

<!DOCTYPE html>
<html>
    <head>
        <title> Lightbox </title>
        <link rel="stylesheet" type="text/css" href="lightboxcss.css">
    </head>
    <body>
        <div id = "overlay"> </div> 


        <img src="batman.jpg" alt="" href="javascript:void(0)" onclick="lightbox(1)" id="batman" style="height:100px;width:160px;margin-left:45%;margin-top:16%;">

        <br><br><br><br>

        <p> RANDOM TEXT STUFF </p><br><br>
        <p> 328ueekfuuirgh40t43h8hohro8ht </p>


   <script src="lightboxjs.js"> </script>
    </body>
</html>
-2
Nahmed39 12 ene. 2017 a las 21:11

3 respuestas

La mejor respuesta

Supongo que el código javascript se encuentra en su archivo .js "lightboxjs.js". ¿Incluyó la biblioteca jQuery en alguna parte?

Si no lo hace, comience agregando esta línea <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> antes de incluir su archivo javascript personalizado.

1
Spri 12 ene. 2017 a las 18:17
$(document).ready(function(){
 //page is ready

  $("#overlay").on("click",function(){
    this.fadeOut(1000);
  });
  });

No puede agregar un detector de eventos si el dom no está cargado. Además, no olvide incluir jquery antes de ejecutar el script superior ...

1
Jonas Wilms 12 ene. 2017 a las 18:28

¿A dónde llamas la biblioteca jquery? Debe cargar jquery justo encima de lightbox js.js y también puede usar la sintaxis jquery para escuchar el evento #overlay click.

0
Adrianopolis 12 ene. 2017 a las 18:17