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

  • 相关阅读:
    Android apk 的安装过程
    Android布局技巧
    Android achartengine统计图
    Less适配移动端rem
    jquery.cookie.js时间设置
    前端面试题记录
    js身份证号码验证(小程序版)
    leetcode算法题笔记|Reverse Integer
    leetcode算法题笔记|two sum
    微信小程序多商品评价评星提交
  • 原文地址:https://www.cnblogs.com/sxdcgaq8080/p/5737779.html
Copyright © 2011-2022 走看看