jquery事件失效全面解析

最新推荐文章于 2024-09-21 11:29:05 发布

子也

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量540

点赞数 2

分类专栏： jQuery篇文章标签：前端事件失效

本文链接：https://blog.csdn.net/feng_zi_ye/article/details/80717185

版权

jQuery篇专栏收录该内容

1 篇文章 0 订阅

订阅专栏

原因1：jquery导入顺序需要放在javascript片段之前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js" type="application/javascript"></script>
</head>
<body>
</body>
<script>
    //todo
</script>
</html>

原因2：html解析顺序导致事件失效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js" type="application/javascript"></script>
    <script>
        $("button").click(function(){//js在dom节点之前解析，导致click事件失效
            alert("click");
    });
    </script>
</head>
<body>
    <button>click</button>
</body>
</html>

解决办法：

1、script片段放在<body>标签在后，让他解析顺序在dom之后

2、把script代码放在$(function(){});之中，推荐这种方法。意思是该js在dom元素加载完成后再解析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js" type="application/javascript"></script>
    <script>
    $(function(){
            $("button").click(function(){//js在dom节点之前解析，导致click事件失效
            alert("click");
        });
    });
    </script>
</head>
<body>
    <button>click</button>
</body>
</html>