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

最新推荐文章于 2024-05-04 16:28:42 发布

春哥111

最新推荐文章于 2024-05-04 16:28:42 发布

阅读量152

点赞数

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_62089210/article/details/127748501

版权

这几天在写前端代码的时候遇到一个问题，可能也是大家常见的问题吧，就是我在动态添加一个元素的时候，后来给这个元素添加一个事件，但是事件未生效==，下面贴入代码：
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添加了点击事件，然后用过滤触发事件的所选元素的后代的选择器字符串，这样添加的事件就会生效啦。

春哥111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
对jquery里面的on()方法的理解

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

扫一扫