【jQuery 区别】.click()和$(document).on("click","指定的元素",function(){});的区别

简介: 给出以下的代码展示: 1 //绑定 下一页 的点击事件 2 $("a[aria-label='Next']").click(function(){ 3 $("a[aria-label='Previous']").

给出以下的代码展示:

 1 //绑定 下一页 的点击事件
 2          $("a[aria-label='Next']").click(function(){
 3              $("a[aria-label='Previous']").show();
 4              if(page.pageNo == page.totalPage - 1){
 5                  $("a[aria-label='Next']").hide();
 6              }else{
 7                  $("a[aria-label='Next']").show();
 8              }
 9              page.pageNo++;
10              page.pageSet(bindData , page);
11          });
12          
13          //上面的.click()绑定点击事件 和 下面的 $(document).on("click",".pagination li:gt(0):not(:last)",function(){});的区别在于:
14          //.click只能为页面现有的元素绑定点击事件,如果是动态生成的新的元素,是没有事件的
15          //而$(document).on("click","指定的元素",function(){});方法则是将指定的事件绑定在document上,而新产生的元素如果符合指定的元素,那就触发此事件
16          
17          //为动态生成的 页码按钮 添加 点击事件
18          $(document).on("click",".pagination li:gt(0):not(:last)",function(){
19              page.pageNo = $(this).text();
20              $("a[aria-label='Previous']").show();
21              $("a[aria-label='Next']").show();
22              if(page.pageNo == "1"){
23                  $("a[aria-label='Previous']").hide();
24              }
25              if(page.pageNo == page.totalPage){
26                  $("a[aria-label='Next']").hide();
27              }
28             
29              page.pageSet(bindData , page);
30          });
View Code

上面的.click()绑定点击事件 和 下面的 $(document).on("click",".pagination li:gt(0):not(:last)",function(){});的区别在于:
1》》.click只能为页面现有的元素绑定点击事件,如果是动态生成的新的元素,是没有事件的
2》》而$(document).on("click","指定的元素",function(){});方法则是将指定的事件绑定在document上,而新产生的元素如果符合指定的元素,那就触发此事件

相关文章
|
2月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
16 1
|
2月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
23 1
|
1月前
|
JavaScript 前端开发
JQuery和JS的区别有哪些?
JQuery和JS的区别有哪些?
14 0
|
1月前
|
JavaScript 前端开发
jQuery 和 Zepto 的区别? 各自的使用场景?
jQuery 和 Zepto 的区别? 各自的使用场景?
11 1
|
2月前
|
前端开发 JavaScript Java
第四章使用jQuery操作DOM元素
第四章使用jQuery操作DOM元素
10 0
|
2月前
|
JavaScript
jQuery操作DOM元素案例
jQuery操作DOM元素案例
11 0
|
2月前
|
JavaScript 索引
jQuery选择器 获取元素的十一种方式
jQuery选择器 获取元素的十一种方式
|
4月前
|
JavaScript 前端开发
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
22 0
|
4月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
42 0
|
4月前
|
JavaScript
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
29 0

相关课程

更多