zoukankan      html  css  js  c++  java
  • 【jQuery 区别】.click()和$(document).on("click","指定的元素",function(){});的区别

    转自:https://www.cnblogs.com/sxdcgaq8080/p/5737779.html

     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          });

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

     
     
     
    好文要顶 关注我 
  • 相关阅读:
    01 mybatis框架整体概况(2018.7.10)-
    第一课(2018.7.10)
    JavaEE 企业级分布式高级架构师课程_汇总贴
    5-1条件运算符 & 5-2
    5-3运算符的优先级
    4-3逻辑非运算符及案例 & 4-4
    4-1逻辑与运算符介绍 & 4-2逻辑或运算符介绍
    3-3if-else条件结构 & 3-4 & 3-5
    3-2if条件结构
    3-1关系运算符
  • 原文地址:https://www.cnblogs.com/sharpest/p/10416156.html
Copyright © 2011-2022 走看看