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

本文介绍了使用jQuery处理分页导航中静态与动态生成元素的点击事件。通过对比使用.click()和$(document).on()方法的不同之处，展示了如何有效为动态生成的页码按钮绑定点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　　　　　//绑定 下一页 的点击事件  
         $("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上，而新产生的元素如果符合指定的元素，那就触发此事件

转载于:https://www.cnblogs.com/mr-wuxiansheng/p/7136864.html