$().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().。
在事件的处理中，可以阻止冒泡但是允许默认事件的发生。
随机推荐
- Springboot 系列（十七）迅速使用 Spring Boot Admin 监控你的 Spring Boot 程序，支持异常邮件通知
1. Spring Boot Admin 是什么 Spring Boot Admin 是由 codecentric 组织开发的开源项目,使用 Spring Boot Admin 可以管理和监控你的 S ...
- MongoDB下载以及安装
一.下载与安装 1.安装Mongo MongoDB下载地址:https://www.mongodb.com/download-center?jmp=tutorials#community 运行安装程序 ...
- 如何将项目托管到Github上
将本地项目放到GitHub上托管并展示 传送门 利用Github Pages展示自己的项目 传送门 git Please tell me who you are解决方法 传送门 git config ...
- java中 在一个异常处理中什么语句块是可多个的
MM们 异常处理一般格式:捕获异常:try{//代码块}catch(异常类型,例如:Exception e){//需要抛出的异常,例如:e.printStackTrace();}catch(异常类型) ...
- 搜狗输入法弹窗搜狐新闻的处理 以及sogoucloud.exe的处理
https://www.cnblogs.com/Asa-Zhu/p/3359034.html 使用everything搜索SohuNews.exe,然后找到安装路径C:\Program Files ( ...
- RF问题收集
console中不打印日志 报错信息: 修改pop方法: try: result = result.decode('UTF-8') except UnicodeDecodeError: pass re ...
- OpenStack 虚拟机冷/热迁移的实现原理与代码分析
目录 文章目录 目录 前文列表 冷迁移代码分析(基于 Newton) Nova 冷迁移实现原理 热迁移代码分析 Nova 热迁移实现原理 向 libvirtd 发出 Live Migration 指令 ...
- 阶段3 3.SpringMVC·_01.SpringMVC概述及入门案例_08.RequestMapping注解的作用
用于建立请求URL和处理请求方法之间的对应关系. 增加一个testResuqestMapping方法来测试 把注解放在类上 服务器重新部署 再次重新部署 这次就可以请求到数据 了 注解放在类上:用来表 ...
- Jmeter之乱码 （二）
Jmeter查看结果树中响应结果中出现乱码,如下图所示: 解决方案: 修改Jmeter的默认字符编码与测试系统一致,修改{JMETER_HOME}\bin\jmeter.properties文件,如下 ...
- HDP-2.6.0.3
http://public-repo-1.hortonworks.com/HDP/centos6/2.x/updates/2.6.0.3/HDP-2.6.0.3-centos6-rpm.tar.gz ...