$("#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上,而新产生的元素如果符合指定的元素,那就触发此事件

 

相关文章
|
4月前
|
JavaScript
jQuery - 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
55 10
|
4月前
|
JavaScript
箭头函数与普通函数(function)的区别
箭头函数是ES6引入的新特性,与传统函数相比,它有更简洁的语法,且没有自己的this、arguments、super或new.target绑定,而是继承自外层作用域。箭头函数不适用于构造函数,不能使用new关键字调用。
|
5月前
|
JavaScript
jQuery 事件
jQuery 事件
48 10
|
4月前
|
JavaScript
箭头函数与普通函数(function)的区别
箭头函数是ES6引入的新语法,相比传统函数表达式更简洁,且没有自己的this、arguments、super或new.target绑定,而是继承自外层作用域。这使得箭头函数在处理回调和闭包时更加灵活方便。
|
5月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
4月前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
39 0
|
5月前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
31 2
|
5月前
|
JavaScript
jQuery 事件 方法
jQuery 事件 方法
45 3
|
5月前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
38 6
|
5月前
|
JavaScript
jQuery 事件 方法
jQuery 事件 方法
26 0

相关课程

更多