$().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().。
在事件的处理中，可以阻止冒泡但是允许默认事件的发生。
随机推荐
- [LOJ3119][CTS2019|CTSC2019]随机立方体：组合数学+二项式反演
分析 感觉这道题的计数方法好厉害.. 一个直观的思路是,把题目转化为求至少有\(k\)个极大的数的概率. 考虑这样一个事实,如果钦定\((1,1,1),(2,2,2),...,(k,k,k)\)是那\ ...
- Android_(传感器)指南针
Android方向传感器 传感器中的X:如上图所示,规定X正半轴为北,手机头部指向OF方向,此时X的值为0,如果手机头部指向OG方向,此时X值为90,指向OH方向,X值为180,指向OE,X值为270 ...
- JS框架_(JQuery.js)Tooltip弹出式按钮插件
百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...
- Zeller 公式：计算任意一天是星期几
Zeller's Formula: For the Gregorian calendar, Zeller's Formula is \[\displaystyle W=\left(\left\lflo ...
- 14.多线程设计模式 - Master-Worker模式
多线程设计模式 - Master-Worker模式 并发设计模式属于设计优化的一部分,它对于一些常用的多线程结构的总结和抽象.与串行相比并行程序结构通常较为复杂,因此合理的使用并行模式在多线程并发中更 ...
- Ubuntu 16.04配置SSL免费证书
主要参考地址为:https://blog.csdn.net/setoy/article/details/78441613 本篇主要以Apache这个web服务器来讲解,所以前提必须要安装好apache ...
- C++入门经典-例3.25-使用循环输出闰年
1:代码如下: // 3.25.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> usin ...
- 如何将redis加入到Windows 服务中
将redis加入到Windows 服务的方法 原文出自:https://www.cnblogs.com/zoro-zero/p/5761507.html, 本文稍作完善 1.下载zip的Redis,对 ...
- linux挂载问题
说明 Linux系统在使用光盘.软盘或U盘时,必须先执行挂载(mount)命令. 挂载命令会将这些存储介质指定成系统中的某个目录,以后直接访问相应目录即可读写存储介质上的数据. 挂载光盘 mount ...
- Mac下破解百度网盘限速(Chrome + Aria2GUI)
基本原理是利用Aria2GUI的多线程下载来达到提速的目的,具体步骤如下: 1.下载Aria2GUI客户端(注意,客户端文件要放入‘应用程序’,否则会报错),使用时注意修改线程数,默认为16,不够用, ...