$().click()和$().on('click',function(){})的区别
1. $(选择器).click(fn)
当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。
HTML代码：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('ul>li').click(function() {
console.log($(this).html());
});
$('ul').append('<li>5</li><li>6</li>');
})
</script>
</body> </html>
效果图：后面动态创建的5和6，没法进行点击事件触发。
2.$(选择器).on('click',function(){})
on方法包含很多事件，点击，双击等等事件。和$().click()的用法一样，最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数。
（支持动态绑定元素，即页面上元素有添加或变化后仍可绑定,前提是‘选择器’须是目标绑定元素的父元素）
HTML代码：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/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> </html>
效果图：动态添加的元素也能被点击触发函数。
随机推荐
- 【原】Coursera—Andrew Ng机器学习—课程笔记 Lecture 18—Photo OCR 应用实例:图片文字识别
Lecture 18—Photo OCR 应用实例:图片文字识别 18.1 问题描述和流程图 Problem Description and Pipeline 图像文字识别需要如下步骤: 1.文字侦测 ...
- keepalived和zookeeper对比
https://blog.csdn.net/vtopqx/article/details/79066703keepalived与zookeeper都可以用来实现高可用,高可用一般跟负载均衡会一起考虑, ...
- go_内建变量类型
bool, string (u)int, (u)int8, (u)int16, (u)int32, (u)int64, uintptr (uintptr 是指针) byte, rune(表示字符cha ...
- Quartz_2_简单编程式任务调度使用（CronTrigger）
第二个要介绍的任务调度器中的触发器是 CronTrigger ,相比较 SimpleTrigger 来说,CronTrigger 相对灵活,对于复杂的业务需求来说,更加的实用.要在使用 CronTri ...
- Maven详解【面试+工作】 各种安装 没用
1 Maven介绍1.1 项目开发中遇到的问题 1.都是同样的代码,为什么在我的机器上可以编译执行,而在他的机器上就不行? 2.为什么在我的机器上可以正常打包,而配置管理员却打不出来? 3.项目组加入 ...
- java的web配置文件的“<load-on-startup>的说明[转]
<servlet> <servlet-name>log4jInitServlet</servlet-name> <servlet-class>org.s ...
- SSL技术白皮书
首页产品技术操作系统ComwareV5安全和VPN SSL技术白皮书 下载 收藏 打印 推荐 摘自:http://www.h3c.com/cn/d_200812/622834_30003_0.htm# ...
- Sublime Text 3 -mac简体中文汉化包下载及教程
Sublime Text 3下载 官方下载地址:http://www.sublimetext.com/3 汉化包链接 1.将上面要求下载的sublime_text_3.zip 文件解压,得到的Defa ...
- sublime 3插件安装记录
安装sublime 3的package control管理器: 从菜单 View - Show Console 或者 ctrl + ~ 快捷键,调出 console.将以下 Python 代码粘贴进去 ...
- 【转载】redis优化配置和redis.conf说明
转载地址:http://blog.csdn.net/luozhonghua2014/article/details/40568707?utm_source=tuicool&utm_medium ...