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

来源：互联网发布：ipad4下载软件编辑：程序博客网时间：2024/06/07 17:22

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

阅读全文

1 0