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().。
在事件的处理中，可以阻止冒泡但是允许默认事件的发生。
jQuery的区别：$().click()和$(document).on('click','要选择的元素',function(){})的不同的更多相关文章
-
$().click()和$(document).on(&#39;click&#39;,&#39;要选择的元素&#39;,function(){})的不同
1. $(选择器).click(fn) 当选中的选择器被点击时触发回调函数fn.只针对与页面已存在的选择器; 2.$(document).on('click','要选择的元素',function(){ ...
-
$().click()和$(document).on(&#39;click&#39;,&#39;要选择的元素&#39;,function(){})的不同（转https://www.cnblogs.com/sqh17/p/7746418.html）
$(document).on();用于动态绑定事件 jQuery的出现,大大简化了对dom的操作,但是如果不是仔细阅读api和进行操作,就不知道其中最大的优点和使用方式.就拿$().click()和$ ...
-
【jQuery 区别】.click()和$(document).on(";click";,";指定的元素";,function(){});的区别
给出以下的代码展示: //绑定 下一页 的点击事件 $("a[aria-label='Next']").click(function(){ $("a[aria-label ...
-
jquery live 区别
http://www.360doc.com/content/13/1222/22/14022539_339358149.shtml 开始的时候在jQuery.1.7.1中使用了.live()觉得很好用 ...
-
jquery bind event， use on. $(document).on(";click";,";#a";,function(){alert(1)}) [#document]
$(document).on("click","#a",function(){alert(1)}) [#document] as a replacement o ...
-
hexo next中遇到的bug，引发出的关于jquery中click()函数和on("click",function())的区别
个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 背景: 本人在维护博客的时候加入了aplaye ...
-
$(document).on(&#39;click&#39;,&#39;.classname&#39;,function(){}); VS $(&#39;.classname&#39;).on(&#39;click&#39;,function(){});
jquery中用on来绑定事件,经常的写法有$(document).on('click','.classname',function(){});$('.classname').on('click',f ...
-
点击div和某些控件之外的地方隐藏div，点击div不隐藏。对象 click和document click冲突有关问题
帮朋友解决这个问题,我发现用以往想想像的方式来实现,貌似不太可行,所以从网上找了一些解决办法,进行优化,这篇比较详细,所以拿来备忘,另一方面也希望可以帮助需要的同学! 问题背景:jQuery事件问题! ...
-
苹果手机浏览器$(document).on(“click”,function(){})点击无效的问题
<label class="js_highlight" style="display: inline-block;float: left;width: 50%;&q ...
随机推荐
-
Execute Sql Task 的Result DataSet如何返回
Execute Sql Task的Result DataSet 主要有以下四种,当Execute Sql Task返回结果之后,需要使用SSIS Variable 来接收数据. 例子中使用的数据表代码 ...
-
javascript 原型链
浅谈JS原型链 原型链 ECMAScript中描述了原型链的概念.我们知道ECMAScript并不像C++,Java那样使用类,但是对象仍然可以通过多种方式创建,其中就有构造函数方式.每个构造函数都有 ...
-
32位和64位系统区别及int字节数
理论上来讲 我觉得数据类型的字节数应该是由CPU决定的,但是实际上主要由编译器决定(占多少位由编译器在编译期间说了算). 常用数据类型对应字节数 可用如sizeof(char),sizeof(ch ...
-
Spring依赖关系
在Spring中,各个模块的依赖关系通过简单的IoC配置文件进行描述,使这些外部化的信息集中并且明了,我们在使用其他组件服务时,只需要去配置文件中了解和配置这些依赖关系即可,也就是说这里关心的是接口, ...
-
安装CouchbaseClient的过程中提示 Error 1935.An error occurred during the installation of assembly;Error:-1603 fatal error during installation
安装过程中提示报错 点击确定后 安装程序会接着回滚,又提示报错如下 Error 1935的解决方法是下载一个微软的补丁. http://support.microsoft.com/de ...
-
Linux下redis安装与使用
redis官网地址:http://www.redis.io/ 最新版本:2.8.3 在Linux下安装Redis非常简单,具体步骤如下(官网有说明): 1.下载 ...
-
Android 6.0doze和standby 的一点理解
之前写的压力测试程序,在开发版和5.0上面测试好好的,即使熄灭屏幕也会跑.我的程序主要是在Activity里面开启了一个thread,其中不断在界面上显示任务信息.换到6.0的 机器上面,发现一个现象 ...
-
zoj 1649 Rescue （BFS）（转载）
又是类似骑士拯救公主,不过这个是朋友拯救天使的故事... 不同的是,天使有多个朋友,而骑士一般单枪匹马比较帅~ 求到达天使的最短时间,杀死一个护卫1 units time , 走一个格子 1 unit ...
- rgba 和 IE 的 filter数值转换
-
[转]在Windows下编译ffmpeg完全手册
本文的内容几乎全部来自于FFmpeg on Windows,但是由于国内的网络*,很难访问这个域名下的内容,因此我一方面按照我自己的理解和实践做了翻译,另一方面也是为了能提供一个方便的参考方法. 注 ...