$("#XXX").click()和$("#YYY").on("click","指定的元素",function(){});的区别(jQuery动态绑定事件)

简介:       //绑定 下一页 的点击事件 $("a[aria-label='Next']").click(function(){ $("a[aria-label='Previous']").
      //绑定 下一页 的点击事件  
         $("a[aria-label='Next']").click(function(){  
             $("a[aria-label='Previous']").show();  
             if(page.pageNo == page.totalPage - 1){  
                 $("a[aria-label='Next']").hide();  
             }else{  
                 $("a[aria-label='Next']").show();  
             }  
             page.pageNo++;  
             page.pageSet(bindData , page);  
         });  
           
         //上面的.click()绑定点击事件 和 下面的 $(document).on("click",".pagination li:gt(0):not(:last)",function(){});的区别在于:  
         //.click只能为页面现有的元素绑定点击事件,如果是动态生成的新的元素,是没有事件的  
       //而$(document).on("click","指定的元素",function(){});方法则是将指定的事件绑定在document上,
//而新产生的元素如果符合指定的元素,

//那就触发此事件
//为动态生成的 页码按钮 添加 点击事件 $(document).on("click",".pagination li:gt(0):not(:last)",function(){ page.pageNo = $(this).text(); $("a[aria-label='Previous']").show(); $("a[aria-label='Next']").show(); if(page.pageNo == "1"){ $("a[aria-label='Previous']").hide(); } if(page.pageNo == page.totalPage){ $("a[aria-label='Next']").hide(); } page.pageSet(bindData , page); });

 

 

结论:

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

 

相关文章
N..
|
2月前
|
JavaScript 前端开发
jQuery事件处理
jQuery事件处理
N..
13 1
|
2月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
16 1
|
2月前
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
12 0
|
2月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
23 1
|
6天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
26天前
|
JavaScript 前端开发
JQuery和JS的区别有哪些?
JQuery和JS的区别有哪些?
14 0
|
29天前
|
Web App开发 JavaScript 前端开发
jquery的冒泡事件event.stopPropagation()
jquery的冒泡事件event.stopPropagation()
8 0
|
1月前
|
JavaScript 前端开发
jQuery 和 Zepto 的区别? 各自的使用场景?
jQuery 和 Zepto 的区别? 各自的使用场景?
11 1
|
2月前
|
JavaScript 前端开发
jQuery中的事件与动画
jQuery中的事件与动画
10 0
|
2月前
|
前端开发 JavaScript Java
第四章使用jQuery操作DOM元素
第四章使用jQuery操作DOM元素
10 0