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

    给出以下的代码展示:

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

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

  • 相关阅读:
    02-zabbix安装部署
    01-zabbix服务说明
    00-ContOS 7.5编译安装MySQL-5.7.30
    bitset习题
    数颜色[分块]
    旋转子段 (思维stl)
    双栈排序(洛谷P1155)二分图的判定+思维贪心
    常见的系统获取唯一码方式
    SHELL-数组
    Prometheus-alertmanager组件使用
  • 原文地址:https://www.cnblogs.com/sxdcgaq8080/p/5737779.html
Copyright © 2011-2022 走看看