Question

即使语法正确（通过在线语法检查程序检查）并且函数运行（使用纯JS测试），下面的Jquery也不会在我的浏览器中运行。为什么会这样？

如果这个问题的答案相当简单，我会提前道歉但是在谷歌搜索15分钟后我无法得到答案。

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>

Answer 1

$(document).ready(function(){
 //page is ready

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

如果没有加载dom，则无法添加eventlistener。也不要忘记在执行上层脚本之前包含jquery ...

Answer 2

我认为javascript代码位于.js文件“lightboxjs.js”中。你有没有在任何地方包含jQuery库？

如果不这样做，请先添加此行<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>，然后再添加自定义javascript文件。

Answer 3

你在哪里调用jquery lib？您需要在lightboxjs.js上方加载jquery，并且还可以使用jquery语法来监听#overlay click事件。

Jquery没有被处理

3 个答案: