$().click()和$(document).on('click','要选择的元素',function(){})的不同（转https://www.cnblogs.com/sqh17/p/7746418.html）
$(document).on();用于动态绑定事件
jQuery的出现，大大简化了对dom的操作，但是如果不是仔细阅读api和进行操作，就不知道其中最大的优点和使用方式。就拿$().click()和$(document).on('click','要选择的元素',function(){})来说，都是点击事件的操作，但是也有不同的地方。
1. $(选择器).click(fn)
当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="jquery.min.js"></script>
<script>
$(function(){
$('ul>li').click(function(){
console.log($(this).html());
});
$('ul').append('<li>5</li><li>6</li>');
})
</script>
</body>
结果如下： 后面动态创建的5和6，没法进行点击事件触发。
2.$(document).on('click','要选择的元素',function(){})
on方法包含很多事件，点击，双击等等事件。和$().click()的用法一样，最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="jquery.min.js"></script>
<script>
$(function(){
$('body').on('click','ul>li',function(){
console.log($(this).html());
});
$('ul').append('<li>5</li><li>6</li>');
})
</script>
</body>
结果如下： 动态添加的元素也能被点击触发函数。
$().on()的知识点补充：
1.从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。
$().bind()直接绑定在元素上，和click，blur，mouseon一样的点击事件。
$().live()是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。
$().delegate()是更精确的小范围的使用事件代理。
$().on()结合了这三个方法的优势摒弃了劣势。
2.该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
3. 阻止事件冒泡和事件委托的方法：
A：return false。
在事件的处理中，可以阻止默认事件和冒泡事件。
B：event.preventDefault()
在事件的处理中，可以阻止默认事件但是允许冒泡事件的发生。
C：event.stopPropagation().。
在事件的处理中，可以阻止冒泡但是允许默认事件的发生。
随机推荐
- Exchanger 原理
Exchanger(交换者)是一个用于线程间协作的工具类.Exchanger用于进行线程间的数据交换.它提供一个同步点,在这个同步点两个线程可以交换彼此的数据.这两个线程通过exchange方法交换数 ...
- 计算机网络&http学习笔记持续整理
http不常见状态码: 204: 请求处理成功,但是没有资源可返回. 206: 只返回请求资源的某一部分(客户端只想请求某一部分),响应报文中包含由Content-Range指定范围的实体内容. 30 ...
- 关于MySQL 处理重复数据
统计重复数据 以下我们将统计表中 first_name 和 last_name的重复记录数: mysql> SELECT COUNT(*) as repetitions, last_name, ...
- Struts2拦截器和过滤器的区别？
①过滤器依赖于Servlet容器,而拦截器不依赖于Servlet容器. ②Struts2 拦截器只能对Action请求起作用,而过滤器则可以对几乎所 有请求起作用. ③拦截器可以访问 Action上下 ...
- 【转】如何在Oracle中复制表结构和表数据
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- python3笔记四：if语句
一:学习内容 if语句 if-else语句 if-elif-else语句 if语句练习 二:if语句 1. 格式 if 表达式: 语句 2.逻辑 当程序执行到if语句时,首先计算表达式的值如果表 ...
- 设置ubuntu14.04命令行启动
编辑文件"/etc/default/grub", 把 GRUB_CMDLINE_LINUX_DEFAULT="quiet" 改成GRUB_CMDLINE_L ...
- 浏览器端-3WSchool-JavaScript：JavaScript Boolean 对象
ylbtech-浏览器端-3WSchool-JavaScript:JavaScript Boolean 对象 1.返回顶部 1. Boolean 对象 Boolean 对象表示两个值:"tr ...
- sharesdk短信验证码的集成
在ShareSDK官网http://mob.com/注册并创建Android应用.申请APP_key,下载SDK等 根据官网开发文档导入SDK,目录结构如下 将以上文件按需放入Android Stud ...
- while循环嵌套
<1>while嵌套的格式 while 条件1: 条件1满足时,做的事情1 条件1满足时,做的事情2 条件1满足时,做的事情3 ...(省略)... while 条件2: 条件2满足时,做 ...