$().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().。
在事件的处理中，可以阻止冒泡但是允许默认事件的发生。
随机推荐
- sh_12_字典的遍历
sh_12_字典的遍历 xiaoming_dict = {"name": "小明", ", "} # 迭代遍历字典 # 变量k是每一次循环中 ...
- jQuery_CSS类操作
下面讲述jQuery操作css类,进行类的添加,移除,以及前两项功能的结合操作. <!DOCTYPE html> <html> <head> <meta ch ...
- 【转】HDU-6035-Colorful Tree
转自http://blog.csdn.net/Bahuia/article/details/76141574 题意: 题目链接:http://acm.hdu.edu.cn/showproblem.ph ...
- gdb调试时忽略SIGPIPE 等信号
GDB调试网络程序时,会遇到SIGPIPE信息,默认GDB会把程序停下来,即使程序使用signal(SIGPIPE, SIG_IGN);来忽略信号.用handle命令设置一下缺省的signal的处理行 ...
- 搭建前端性能showslow平台
ShowSlow是一个可以帮助监测各种网站性能指标趋势变化的开源工具.通过收集YSlow,Page Speed,WebPageTest和dynaTrace AJAX排名的数据形成图表以帮助了解网站的变 ...
- 使用 split 命令分割 Linux 文件，使用 cat 合并文件
一些简单的 Linux 命令能让你根据需要分割以及重新组合文件,来适应存储或电子邮件附件大小的限制. Linux 系统提供了一个非常易于使用的命令来分割文件.在将文件上传到限制大小的存储网站或者作为邮 ...
- D4上午
概率和期望DP 概率 某个事件A发生的可能性的大小,称之为事件A的概率,记作P(A). 假设某事的所有可能结果有n种,每种结果都是等概率,事件A涵盖其中的m种,那么P(A)=m/n. 例如投掷一枚骰子 ...
- save——model模块保存和载入使用简单例子
https://www.w3xue.com/exp/article/201812/10995.html =====1====实践模型存入 import tensorflow as tf from te ...
- 前端必须掌握的 nginx 技能(4)
概述 作为一个前端,我觉得必须要学会使用 nginx 干下面几件事: 代理静态资源 设置反向代理(添加https) 设置缓存 设置 log 部署 smtp 服务 设置 redis 缓存(选) 下面我按 ...
- 进程管理工具之supervisor[安装并使用]
在Linux服务器中,有时候我们需要一个进程需要可靠的在后台运行,并且能够监控进程状态,在意外结束时能够自动重启等.此时就可以使用supervisor. supervisor 是使用Python开发的 ...