$().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().。
在事件的处理中，可以阻止冒泡但是允许默认事件的发生。
随机推荐
- Spring Boot教程（三十）使用Spring-data-jpa（1）
在实际开发过程中,对数据库的操作无非就“增删改查”.就最为普遍的单表操作而言,除了表和字段不同外,语句都是类似的,开发人员需要写大量类似而枯燥的语句来完成业务逻辑. 为了解决这些大量枯燥的数据操作语句 ...
- 扫描工具-Nikto
靶机 192.168.1.101 攻击机 192.168.1.102 尝试ping命令 第一个工具 作用 Httrack --->(把目标的网站复制过来) 这样可以减少与目标系统的交互 mkdi ...
- 4000余字为你讲透Codis内部工作原理
一.引言 Codis是一个分布式 Redis 解决方案,可以管理数量巨大的Redis节点.个推作为专业的第三方推送服务商,多年来专注于为开发者提供高效稳定的消息推送服务.每天通过个推平台下发的消息数量 ...
- 分布式-信息方式-ActiveMQ结合Spring
ActiveMQ结合 Spring开发■ Spring提供了对JMS的支持,需要添加 Spring支持jms的包,如下: <dependency> <groupId>org.a ...
- LinkedList类源码浅析(一)
1.先来看一看LinkedList类的字段和构造方法 size记录链表的长度,first永远指向链表的第一个元素,last永远指向链表的最后一个元素 提供两个构造方法,一个无参的构造方法,一个接受一个 ...
- golang string、int、int64 float 互相转换
#string到int int,err := strconv.Atoi(string) #string到int64 int64, err := strconv.ParseInt(string, 10, ...
- C++入门经典-例3.23-使用嵌套循环输出乘法口诀表
1:代码如下: // 3.23.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iomanip> #incl ...
- Spring Boot中使用 Thymeleaf
目录 1.pom.xml引入thymeleaf 2.关闭缓存application.properties 3.编写Controller类 4.模板html 5.运行结果 1.pom.xml引入thym ...
- Java内存泄漏分析和预防
1. 什么是内存泄漏?有什么危害 书面说法: 内存泄漏:对象已经没有被应用程序使用,但是垃圾回收器没办法移除它们,因为还在被引用着. 在Java中,内存泄漏就是存在一些被分配的对象,这些对象有下面两个 ...
- Android 带你读懂事件分发
工作有一段时间,有必要掌握事件传递的机制,最近研究了一下,记录下心得.1 Android中的事件 android中触摸事件比较多,封装中MotionEvent类中,点击.触摸.滑动是我们常用的事件 M ...