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

深藏阁楼爱情的钟 2023-08-17 17:03 125阅读 0赞

这个是在学习时不懂的问题，记录下来方便查看

转至[https://www.cnblogs.com/mr-wuxiansheng/p/7136864.html][https_www.cnblogs.com_mr-wuxiansheng_p_7136864.html]

//绑定 下一页 的点击事件  
             $("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/edllixiaoyu/p/11456984.html

[https_www.cnblogs.com_mr-wuxiansheng_p_7136864.html]: https://www.cnblogs.com/mr-wuxiansheng/p/7136864.html