对jquery里面的on()方法的理解

最新推荐文章于 2023-05-20 01:04:43 发布

半夏ing

最新推荐文章于 2023-05-20 01:04:43 发布

阅读量523

点赞数 1

分类专栏：前端 jquery 文章标签： jquery 前端

本文链接：https://blog.csdn.net/Fiona_lms/article/details/76651302

版权

前端同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

jquery

9 篇文章 0 订阅

订阅专栏

这几天在写前端代码的时候遇到一个问题，可能也是大家常见的问题吧，就是我在动态添加一个元素的时候，后来给这个元素添加一个事件，但是事件未生效==，下面贴入代码：
1、未生效的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<button id="pLabel" name="新加一条">新加一条</button>
<ul id="ulLabel">
    <li class="liLabel">aaa1</li>
    <li class="liLabel">aaa2</li>
    <li class="liLabel">aaa3</li>
</ul>
<script type="text/javascript">
    $("#pLabel").click(function(){
        $("#ulLabel").append('<li class="liLabelnew">aaaQ</li>'); //动态像ul的末尾追加一个新元素
    });
    $('.liLabelnew').on('click',function(){
        alert("ssss");
    })
</script>
</body>
</html>

2、解决未生效的问题代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<button id="pLabel" name="新加一条">新加一条</button>
<ul id="ulLabel">
    <li class="liLabel">aaa1</li>
    <li class="liLabel">aaa2</li>
    <li class="liLabel">aaa3</li>
</ul>
<script type="text/javascript">
    $("#pLabel").click(function(){
        $("#ulLabel").append('<li class="liLabelnew">aaaQ</li>'); //动态像ul的末尾追加一个新元素
    });
    $("#ulLabel").on('click','.liLabelnew',function(){
        alert("dddd");
    })
</script>
</body>
</html>

总结区别
这里写图片描述

其实点击事件是通过ul元素代理到li上的，这里就引入了一个名词“事件代理”，这里就不在细说了，这里主要说一个on()事件：
首先看一下jquery的关于on的API：
这里写图片描述

红色标注的地方是说：用于过滤触发事件的所选元素的后代的选择器字符串。如果选择器是null或省略，则当到达所选元素时，始终触发该事件。（百度翻译的，哈哈，就是这个意思啦），这里明白了这个意思就很好理解了，我们先给ul添加了点击事件，然后用过滤触发事件的所选元素的后代的选择器字符串，这样添加的事件就会生效啦。
OVER